Nativescript ScrollView not scrolling

Question

I'm fairly new to Nativescript development, I have a ScrollView wrapped by a GridLayout, inside the ScrollView I placed various StackLayouts, however the scroll layout is not working at all, one of the stack layouts (yellow) appears centered instead, any idea what is wrong with my code?

<template>
<Page class="background-color:white;">
    <ActionBar class="bg_blue_marine">
    </ActionBar>
    <GridLayout rows="*,auto" columns="*" style="width:100%; height:100%;">
        <ScrollView row="0" col="1" orientation="vertical" style="width:100%; height:auto; background-color:rgb(200,200,200);">
            <StackLayout style="width:100%; height:400px; background-color:red;"></StackLayout>
            <StackLayout style="width:100%; height:400px; background-color:yellow;"></StackLayout>
        </ScrollView>
        <FlexBoxLayout row="1" col="1" style="width:100%; height:80px; align-items:center; justify-content:space-around; background-color:white;"></FlexBoxLayout>
    </GridLayout>
</Page>
</template>

Manoj · Accepted Answer · 2019-11-23 23:58:34Z

2

ScrollView (or anything that's descendent of ContentView like Page) can have only one child element.

In your example, the moment you add the second StackLayout the first StackLayout in ScrollView will be replaced. You will have to stack your items in the first StackLayout.

answered Nov 23, 2019 at 23:58

Manoj

21.9k3 gold badges23 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Simas Joneliunas · Accepted Answer · 2019-11-25 06:46:05Z

<GridLayout rows="300,*" columns="*">
        <ScrollView height="300" orientation="vertical">
    <StackLayout orientation="horizontal" horizontalAlignment="center" row="0" col="0" style="background-color:rgb(200,200,200);">

            <StackLayout orientation="horizontal" horizontalAlignment="center"
                style="width:50%; height:400; background-color:red;"></StackLayout>
            <StackLayout orientation="horizontal" horizontalAlignment="left"
                style="width:50%; height:400; background-color:yellow;"></StackLayout>
    </StackLayout>
</ScrollView>

    <FlexBoxLayout row="1" col="0"
        style="width:100%; height:80; align-items:center; justify-content:space-around; background-color:white;">
    </FlexBoxLayout>
</GridLayout>

Would provide the following result[1]: https://i.sstatic.net/m4TAG.png

I'm not sure whether you can have ScrollView as a row of GridLayout, you should use any Layout instead. Plus you cannot have px unit for height and width. Plus whenever using StackLayout use 'orientation' and 'alignment' properties.

Collectives™ on Stack Overflow

Nativescript ScrollView not scrolling

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related