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.
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
Sorry, I tried it but it doesn't work
Hi Thanh,
If possible could you please share the sample .oml file with us, in order to help you better?
Is the left container contains input/textarea widget?
Are you following the same widget tree hierarchy mentioned in the below screenshot?
If you follow the above procedure, when there is more data in the container, the container will not increase its height automatically
I have checked the shared .oml and found that you have defined a lot of inline CSS rules to the container i.e. width: __% etc, which is not required. Also, the mentioned flex implementation is making the height same for both the container even though the right container/div content get increased dynamically.
Please check the attached .oml file
Put your both these two containers inside a common container and add following style to the parent container.
display:flex;
Hope it works!! Thanks :)
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
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