21
Views
9
Comments
How to flexible style for container
Application Type
Traditional Web
Service Studio Version
11.10.4 (Build 36716)

I have 2 containers.

The one on the right contains a table so the height will vary with different amounts of data.


I want the container on the left to have a height that will automatically change to equal the height of the container on the right.

Please help me how to customize the flexible style of the container, I tried the javascript for the style at extend properties but failed.

Test.oml

Rank: #292

Hi Thanh Ta,

Put your both these two containers inside a common container and add following style to the parent container.

display:flex;

Hope it works!! Thanks :)

mvp_badge
MVP
Rank: #76

Hi Thanh Ta,

For the mentioned use-case, you can refer the pre-defined CSS class like display-flex, flex1, flex2... without defining your own custom css rules as shown below


See this sample app | Flex Container


Hope this helps you!


Kind regards,

Benjith Sam

Rank: #70

Hi Thanh,


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

{

    display: -ms-flex;

    display: -webkit-flex;

    display: flex;

}


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

    flex:1;

}



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

Champion
Rank: #138

Hi Thanh,

Using "display: flex" on the parent container should be enough to make both children have the same height:


The problem you're facing might be caused by the HTML structure you're defining, which to me seems to be over complicated for what you want to achieve. Check a working version in the attached OML or try the following:

1) Remove the Content\Section blocks

2) Remove all unnecessary inline CSS such as fixed heights

3) Apply a background color to the direct children of the flex container



Cheers,

David

Testv3.oml