How to make a container automatically fill height of the mobile screen even if the contents/text inside container is 1 line only? Adding spacing on top bottom is not a good solution. Creating a custom class with flex:1 property did not work. height: ‘100%’ also did not work. When I apply background color to the container it only colors a small part of it according to height of inner content. I want the container expanded to full screen and if content inside is more than a screen then it should allow scrolling. When there is lesser content, minimum height should be equal to screen height. EDIT: It has something to do with layout file. Some class applied to atlas default layout is missing in my case as I made a copy of default layout file and made some changes in it. Need to find that particular style/clas missing on the layout
Hi Umar, can you please share your style code here? I just did this and it works fine for me:
Issue was due to custom layout file being used for the page. Layout file was duplicated from atlas default but somehow it lost some style being applied to it. So I added flex: 1 class to new layout file’s parent/placeholder container. And after that added minHeight: 100% to the page using this layout.
Now the page expanded to full height of screen.