12
Views
4
Comments
Solved
get container height

Hi All

In my reactive web application, I have two containers side by side, my left container's height will change dynamically according to values, so I should set my right container height should be equal to my left container height. Is it possible to assign the left container's height to a local variable and use the local variable's value to assign right container's height? 

Rank: #70
Solution

Ok, can you maintain the same structure and just replace the previous CSS with this one?


.two-divs-full-height-division

{

    display: -ms-flex;

    display: -webkit-flex;

    display: flex;

}


.two-divs-full-height-division > div {

    flex:1;

}


You can see below a demo and resize the text area and see how both containers stay with the same size:

https://jsmarques13.outsystemscloud.com/test2/test

Rank: #70

Hi kavya,


If you want to force them to have the same size, you have an easier way.

You set a container involving the two side-by-side containers and give it a class two-divs-full-height-division and add the following CSS:


.two-divs-full-height-division > div {
    display: table-cell;
}


This will force the containers to have the same size and it will grow according to the size of the largest container. Your Widget Tree would look like this:


Hope it helps.


Regards,
João