Trying to get BOTH horizontal and vertical scrolling in a view. Anyone succeeded?

uiux

#1

I have been unable to find a way to get a page that I can scroll horizontally and vertically. Has anyone managed to achieve this.

Below is a simple example test case that can scroll horizontally using ScrollView. But I am unable to nest them and get it to work.

import { Component} from "@angular/core";
import { GridLayout } from "ui/layouts/grid-layout";
import { Observable, Subscription, Subject } from 'rxjs/Rx';
@Component({
  selector: "playgound-component",
  template: `
        <StackLayout>
            <!-- This is where the magic happens -->
            <ScrollView orientation="horizontal">
                <StackLayout orientation="horizontal" class="scroll-menu">
                    <StackLayout class="scroll-pane">
                        <Label text="Your cool Slide" ></Label>                 
                    </StackLayout>
                    <StackLayout class="scroll-pane">
                        <Button text="Button" ></Button>               
                    </StackLayout>
                    <StackLayout class="scroll-pane">
                        <Button text="Button"></Button>                
                    </StackLayout>
                    <StackLayout class="scroll-pane">
                        <Button text="Button" ></Button>               
                    </StackLayout>
                    <StackLayout class="scroll-pane">
                        <Button text="Button"></Button>                 
                    </StackLayout>
                </StackLayout>
            </ScrollView>      
        </StackLayout>  
  `,
   styles: [`
        .scroll-menu {
            height: 3000;
            padding: 10;
        }
        
        .scroll-pane {
            background-color: #FF4081;
            width: 240;
            height: 3000;
            margin: 10;
        }
        
        Button {
            height: 40;
            horizontal-align: right;
        }
        
        Label {
            color: #fff;
            horizontal-align: center;
        }
   `]
})
export class PlaygroundComponent {constructor(){}}

#2

I got the above example working with a list view within a stacklayout:

                <StackLayout class="scroll-pane-2">
                        <ListView [items]="myItems" (itemTap)="onItemTap($event)">
                            <ng-template let-item="item" let-i="index" let-odd="odd" let-even="even">
                                <StackLayout [class.odd]="odd" [class.even]="even">
                                    <Label [text]='"index: " + i'></Label>
                                    <Label [text]='"[" + item.id +"] " + item.name'></Label>
                                </StackLayout>
                            </ng-template>
                        </ListView>
                    </StackLayout>

#3

did you say you got this sorted? if so mark it as a solutin


#4

https://play.nativescript.org/?template=play-ng&id=wI1JRA