CODEWITHSUNDEEP
cssangularjssassflexbox
sanjana
sanjana

Reputation: 85

How to make stacked divs grow vertically upwards?

I am creating a stacked bar graph. Eventually the bars will be dynamic so i need the bars to grow vertically. When I increase the height of any of the bars, the bars (divs) grow downwards. I want them to grow upwards.

I have tried increasing the height upwards by using padding-top but that does not seem to work either.

I want this to act like a stacked bar graph

https://jsfiddle.net/ruju/18qar5sb/1/

Here, if i try to increase the height on .uc-bar-accept and .uc-bar-deny then the bar will increase vertically below instead of above.

Upvotes: 1

Views: 68

Answers (1)

JohnC
JohnC

Reputation: 3257

Aim positioning bars of bar chart over the grid lines 0,100,200,300 etc

Problem - when bar elements get taller they grow down the screen and no longer align with the bar chart.

Possible solution - use absolute position for the bars of the bar graph, position from the bottom of the parent using the bottom command.

Make the div .uc-bar-wrapper-parent a child of div .uc-bar-graph. This ensures the bottom command relates to the position of the parent.

Line up the .uc-bar-wrapper-parent vertically so it sits correctly on the grid lines e.g. bottom:80px Now any growth in the bar chart elements will be up the page and the chart will stay aligned with the grid lines.

jsfiddle [https://jsfiddle.net/newschapmj1/jgdhm5ua/2/][1]

I'm not an expert on positioning so I may have missed a better way. I looked here https://css-tricks.com/almanac/properties/p/position/

Upvotes: 0

Related Questions