100% height components
Last updated
Was this helpful?
Last updated
Was this helpful?
Was this helpful?
Here, we talk about the Flex Container component.
Let's say you need two components to occupy the whole space of the page - one should be 70% wide and the other 30%. In this article, we'll show how you can achieve this using a Flex Container.
Inside the Flex Container, we've already placed a Table and a Form and set their width. Now, follow the instruction below to configure the height:
First, make sure the Expand content to fit checkbox is selected in page settings in the right side panel.
Add the full-height class to the Flex Container's Styling section.
Now, customize its style in the Custom code tab:
<style>
.full-height > ub-grid > ub-dropzone > .flex,
.full-height > ub-grid > ub-dropzone > .flex > ub-grid-item {
height: 100%!important;
}
</style>
As simple as that! Now, your container's layout will take up 100% height.
In case you have a component with a set width (for example, 500px) and you want the other component to occupy the rest of the space, even on growing, you can also configure 100% height for them.
You just need to set the Grow setting value to "1" in the Flex section for the component that should grow.