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?
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
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
Thanks Joao. I tried it but I'm not getting the expected output
thank you so much Joao... it worked fine for me