CODEWITHSUNDEEP
javascriptandroidiosvue.jsnativescript
gabogabans
gabogabans

Reputation: 3561

Nativescript ScrollView not scrolling

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>

Upvotes: 0

Views: 2072

Answers (2)

Shekher Khare
Shekher Khare

Reputation: 61

<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.

Upvotes: 2

Manoj
Manoj

Reputation: 21908

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.

Upvotes: 2

Related Questions