get container height

kavya anbazagan

Rank: #3003

Solved

get container height

Question

Beginner

Reactive

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?

on 2020-12-12

João Marques

Rank: #70

Solution

Replying to kavya anbazagan's comment on 12 Dec 2020 19:40:40

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

See solution in context

on 2020-12-12

João Marques

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: