Nativescript-angular: ScrollView scrolling breaks when wrapped by layout

[jonnysamps]

I'm building a photo browser app where the user should swipe between pages to see different photos. Here is the view that currently works for me.

<ScrollView orientation="horizontal" ios.pagingEnabled="true" >
  <StackLayout orientation="horizontal">
    <Image *ngFor="#picture of pictures" [src]="picture.originUrl" stretch="aspectFit"></Image>
  </StackLayout>
</ScrollView>

The problem comes when I try to apply an overlay. So I tried to wrap the whole thing in an AbsoluteLayout so that I could have the ScrollView operate as normal but keep the overlay in place on top. When I do this scrolling breaks all-together. Here is the view that breaks scrolling:

<AbsoluteLayout>
  <Label text="overlay" left="0" tope="0"></Label>
  <ScrollView orientation="horizontal" ios.pagingEnabled="true" left="0" top="0">
    <StackLayout orientation="horizontal">
      <Image *ngFor="#picture of buffer" [src]="picture.originUrl" stretch="aspectFit"></Image>
    </StackLayout>
  </ScrollView>
</AbsoluteLayout>

PS: Also, it appears that wrapping it with _ANY_ layout will cause scrolling to break.

PPS: This does not appear to be an issue in plain nativescript.

[matt4446]

As a workaround (if there is a bug there) try the GridLayout instead ... but notice no rows or columns have been added to the markup. The AbsoluteLayout and StackLayout items will overlap from the same position in the top left of the grid:

<GridLayout>
    <!-- overlay --> 
    <AbsoluteLayout verticalAlignment="top" horizontalAlignment="left">
        <StackLayout top="0" left="0" width="300">
            <Label text="overlay"></Label>
        </StackLayout>
    </AbsoluteLayout>  
    <!-- main content --> 
    <StackLayout horizontalAlignment="stretch">
        <ScrollView orientation="horizontal" ios.pagingEnabled="true" >
            <StackLayout orientation="horizontal">
            <Image *ngFor="#picture of pictures" [src]="picture.originUrl" stretch="aspectFit"></Image>
            </StackLayout>
        </ScrollView>
    </StackLayout>  
</GridLayout>

I use a similar approach for my sidebar (pops over from the left of the content). It seems to work quite well. Cant say i've tried adding a scrollview to the AbsoluteLayout ... I'll have to give it a go in one of my side menus.

[dreambo8563]

similar issue with scrollView

after wrapping the ListPicker and my labels with scrollView, the ListPicker and one Label disappeared.

      <StackLayout>

 <ScrollView orientation="vertical">
    <ListPicker #lp [items]='model.listPickerItems' [(ngModel)]='model.selectedIndex'></ListPicker>
    <Label text="{{lp.items}}"></Label> <Label text="{{lp.selectedIndex}}"></Label>
</ScrollView>
          </StackLayout>

[nsndeck]

The problem comes from the fact that AbsoluteLayout measures all its children with infinity space, so the ScrollView is as big as its content and indeed scrolling will not work. A possible fix is it to set a size for the ScrollView. In this specific case % layout size can be used.

<AbsoluteLayout>
  <Label text="overlay" left="0" tope="0"></Label>
  <ScrollView orientation="horizontal" ios.pagingEnabled="true" left="0" top="0" width="100%" height="75%">
    <StackLayout orientation="horizontal">
      <Image *ngFor="#picture of pictures" [src]="picture.originUrl" stretch="aspectFit"></Image>
    </StackLayout>
  </ScrollView>
</AbsoluteLayout>

Both % values are % from the size that parent layout control is measured (AbsoluteLayout). Since Absolute layout is a root element actually these values will be % of the screen size.

[okmttdhr]

( This https://github.com/NativeScript/nativescript-angular/issues/184#issuecomment-212689646 is not directory related to AbsoluteLayout problem though... )

I think you need to do like below;

<StackLayout>
  <ScrollView orientation="vertical">
    <StackLayout>
      <ListPicker #lp [items]='model.listPickerItems' [(ngModel)]='model.selectedIndex'></ListPicker>
      <Label text="{{lp.items}}"></Label> <Label text="{{lp.selectedIndex}}"></Label>
    </ScrollView>
  </ScrollView>
</StackLayout>

without <StackLayout>, it seems like that <ScrollView> can't calculate the height.