ScrollView in Nested Component doesn't scroll

Question

In NativeScript/Angular, I have a component with a ScrollView. When placed in another component it scrolls without a problem, except when it's inside another ScrollView on the same page. Since this is a dropdown list component, it is often going to be found on forms that will need to scroll too.

In the NativeScript documentation, there is an example of a ScrollView inside another ScrollView so I'm not sure why it's not working.

Here are the essentials of the dropdown component. And the form component is a typical form component with a ScrollView.

<ScrollView height="100">
     <StackLayout *ngFor="let item of items">
        <dropdownItem [item]="item" [itemSelected]="itemSelected"
           (itemSelectedEvent)="selectItem($event)"></dropdownItem>
     </StackLayout>
 </ScrollView>

markelc markelc · Accepted Answer · 2019-05-08T15:22:09

It appears that when inside a GridLayout the nested ScrollView doesn't work. After posting my question, I got the bright idea to put it in a StackLayout on the form component instead of GridLayout and it scrolled without a problem.

ScrollView in Nested Component doesn't scroll

1 Answers