Nativescript ScrollView gets cropped by gridview


#1

I am making a Nativescript Android application in which I want a static header and footer and everything in between to be scrollable. To do this I use a gridlayout with a stacklayout for the header and footer and a scrollview to make everything inbetween scrollable.

The content in the scrollview has one stacklayout which needs to expand to the maximum it can get. This I also try to accomplish with a Gridlayout.

I am testing this on 2 emulators, 1 with a very small screen and 1 with a big screen. I can’t get both to work at once. Either the small screen gets cropped or the big screen doesn’t have it’s stacklayout expanded.

Code and screenshots below.

XML:
<Page loaded="loaded" actionBarHidden="true">  
<GridLayout rows="auto,*,auto">
    <!-- Header -->
    <StackLayout height="15%" row="0" width="60%" orientation="horizontal" horizontalAlignment="center">
        <Image src="~/images/logo gezicht.png" stretch ="aspectFit"/>
    </StackLayout>

    <!-- Main -->
    <ScrollView width="80%" row="1" orientation="vertical">
    
        <GridLayout rows="auto,auto,*" orientation="vertical" style="background-color: #d3d3d3"> <!-- height="100%" -->

            <Label text="Welcome, let us start with a few questions!" horizontalAlignment="center" class="pageLabel" row="0"/>

            <StackLayout width="85%" height="10" class="settingFieldHeader" row="1"></StackLayout>
            <StackLayout class="settingField" row="2" height="100%">
                <Label text="What is your name?" class="questionLabel" horizontalAlignment="center"/>
                <TextField text="{{ name }}" hint="Your name."/>
            </StackLayout>

        </GridLayout>
    </ScrollView>

    <!-- Footer -->
    <StackLayout row="2" orientation="horizontal" horizontalAlignment="center">
        <Button text="Next" class="nextButton" tap="saveButton"/>
    </StackLayout>
</GridLayout>
</Page>

Css:

.pageLabel {
    color: #FFFFFF;
    font-size: 22;
}

.settingFieldHeader{
    margin-top: 25;
    padding: 0;
    background-color: #8FCBFA;
    border-radius: 20,20,0,0;
}

.settingField {
    padding: 25,15,25,15;
    background-color: #FFFFFF;
    border-radius: 20;
}

.questionLabel{
    font-size: 20;
    color: #000000;
    padding-bottom: 50;
}

.nextButton {
    width: 80%;
    margin: 25,25,25,25;
}

Screenshot of Gridlayout without height=“100%”, scrollable but not expanded

Screenshot of Gridlayout with height=“100%”, not scrollable but expanded (I added some spaces to push the textbox out of the layout to show that it isn’t scrollable)

Any help would be greatly appreciated! Thank you!


#2

I made some quick changes to your example markup based on my first thoughts. I used a StackLayout rather than GridLayout in the ScrollView, and verticalAlignment="stretch" rather than height="100%" in a couple of places.

I think the problem is related to the GridLayout inside of the scrollview in your example. GridLayout uses its available parent height in order to determine the height of its rows. When it’s placed inside of a ScrollView which has a (virtually) infinite height, I would expect that it can lead to some states with undefined behavior.

I have not tested this out, so let me know if it’s any better: https://gist.github.com/nickcabral/5dc85d8e48385752b96b5277924c2b55


#3

Thank you for the response!

I get what you are getting at however the verticalAlignment="stretch" has no effect on the layouts. I tried placing a GridLayout within a stretched StackLayout however this does expand the StackLayout but breaks the ScrollView (it just disappears).

Any other ideas?


#4

I figured out what I overlooked on my first attempt. I’ve updated my gist with a version that works. I had a chance to test it out on both android and iOS emulators and it correctly expands the settingField to fill all vertical space, and allows scrolling on smaller screens that can’t fit the entire settingField.

Here’s that link again (updated with working XML):


#5

Why are you not using docklayout?

Docklayout strechLastChild=true
   Stacklayout (header) dock=top
   Stacklayout (footer) dock=bottom
   ScrollView
       Stacklayout (scrollable content)
  • sorry for the lazy structuring. But i hope it is clear enough. If it isn’t clear, let me know, i can make a simple playground app with that layout.

#6

@multishiv19 Yeah @StefanA’s root GridLayout could definitely be replaced with a dock layout (in my solution I left the root GridLayout in place since it wasn’t the source of his issue).

The issue he is seeing is caused by the GridLayout he has as a child of the ScrollView. You’ll see in the code I shared that I swapped the nested grid out for a DockLayout which solves the issue.


#7

Great that works, thanks a lot!

I’m new to NativeScript so didn’t know about this option from docklayout, that’s why I used gridlayout.