Native app full page height container

0
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
asked
2 answers
0

Hi Umar, can you please share your style code here? I just did this and it works fine for me:


export const fullHeight = {
    container: {
        flex: 1,
        backgroundColor: "red"
    }
}

 

answered
0

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.

answered