CODEWITHSUNDEEP
nativescriptangular2-nativescript
Tihomir Mitkov
Tihomir Mitkov

Reputation: 846

ScrollView doesn't work when wrapped in a layout

I noticed that when a ScrollView is wrapped inside another layout widget, it stops responding to panning. I'm looking for a solution to allow the ScrollView work as intended even when wrapped. Here is a sample app in Playground and here I post its template

This example doesn't scroll:

<AbsoluteLayout #wrapTop class="wrapTop" left="0" top="0" width="100%" height="100%">
<ScrollView orientation="horizontal" sdkExampleTitle sdkToggleNavButton>
    <GridLayout class="m-15" columns="auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto">
         <Label width="50" height="50" class="h3 m-15" col="0" text="Title 1"></Label>
         <Label width="50" height="50" class="h3 m-15" col="1" text="Title 2"></Label>
         <Label width="50" height="50" class="h3 m-15" col="2" text="Title 3"></Label>
         <Label width="50" height="50" class="h3 m-15" col="3" text="Title 4"></Label>
         <Label width="50" height="50" class="h3 m-15" col="4" text="Title 5"></Label>
         <Label width="50" height="50" class="h3 m-15" col="5" text="Title 6"></Label>
         <Label width="50" height="50" class="h3 m-15" col="6" text="Title 7"></Label>
         <Label width="50" height="50" class="h3 m-15" col="7" text="Title 8"></Label>
         <Label width="50" height="50" class="h3 m-15" col="8" text="Title 9"></Label>
         <Label width="50" height="50" class="h3 m-15" col="9" text="Title 10"></Label>
         <Label width="50" height="50" class="h3 m-15" col="10" text="Title 10"></Label>
         <Label width="50" height="50" class="h3 m-15" col="11" text="Title 11"></Label>
         <Label width="50" height="50" class="h3 m-15" col="12" text="Title 12"></Label>
         <Label width="50" height="50" class="h3 m-15" col="13" text="Title 13"></Label>
         <Label width="50" height="50" class="h3 m-15" col="14" text="Title 14"></Label>
         <Label width="50" height="50" class="h3 m-15" col="15" text="Title 15"></Label>
    </GridLayout>
</ScrollView>
</AbsoluteLayout>

Upvotes: 0

Views: 130

Answers (1)

Manoj
Manoj

Reputation: 21898

I don't think you need an AbsoluteLayout here, at least when you are not going to place your child component in absolute position.

Also you wouldn't need a GridLayout when you want to simply stack items in horizontal orientation, you could use StackLayout with horizontal orientation instead.

I have updated your Playground example.

Learn more about layouts at https://www.nslayouts.com/

Update:

Thanks to @DrAchernar who brought up a valid point. You should consider using ListView / RadListView if you are planning to render n number of items that would look alike. RadListView supports different layouts & horizontal orientation which should be suitable for your requirement here.

Upvotes: 3

Related Questions