ScrollView is not scrolling the entrie page


#1
<ActionBar title="About Us" class="action-bar">
</ActionBar>
<RadSideDrawer #drawerComponent tkToggleNavButton showOverNavigation="true">
    <ScrollView tkDrawerContent class="sidedrawer-left">
        <StackLayout horizontalAlign="left">
            <drawer-content></drawer-content>
        </StackLayout>
    </ScrollView>
    <ScrollView tkMainContent>
        <StackLayout orientation="vertical">
            <GridLayout class="m-5" rows="auto auto auto">
                <StackLayout row="0" class="p-10 border m-5">
                    <Label class="h2" text="Our History"></Label>
                    <Label class="body" text="Started in 2010, Ristorante con Fusion quickly established itself as a culinary icon par excellence in Hong Kong. With its unique brand of world fusion cuisine that can be found nowhere else, it enjoys patronage from the A-list clientele in Hong Kong."
                        textWrap="true"></Label>
                    <Label class="body" text="Featuring four of the best three-star Michelin chefs in the world, you never know what will arrive on your plate the next time you visit us. The restaurant traces its humble beginnings to The Frying Pan, a successful chain started by our CEO, Mr. Peter Pan, that featured for the first time the world's best cuisines in a pan."
                        textWrap="true"></Label>
                </StackLayout>

                <StackLayout row="1" *ngIf="leaders">
                    <Label class="p-5 h2" text="Corporate Leadership"></Label>
                </StackLayout>

                <StackLayout row="2">
                    <ListView [items]="leaders" class="list-group">
                        <ng-template let-leader="item">
                            <StackLayout orientation="horizontal">
                                <Image row="2" col="0" rowSpan="2" height="60" width="60" [src]="BaseURL + leader.image" class="img-circle"></Image>
                                <GridLayout class="list-group-item" rows="auto auto auto" columns="*">
                                    <Label row="0" col="0" [text]="leader.name" class="list-group-item-heading"></Label>
                                    <Label row="1" col="0" [text]="leader.designation" class="list-group-item-heading"></Label>
                                    <Label row="2" col="0" class="list-group-item-text" [text]="leader.description" textWrap="true"></Label>
                                </GridLayout>
                            </StackLayout>
                        </ng-template>
                    </ListView>
                    <ActivityIndicator busy="true" *ngIf="!(leaders || leaderErrMess)" width="50" height="50" class="activity-indicator"></ActivityIndicator>
                    <Label *ngIf="leaderErrMess" [text]="'Error: ' + leaderErrMess"></Label>
                </StackLayout>
            </GridLayout>
        </StackLayout>
    </ScrollView>
</RadSideDrawer>

Dear community I’m been trying this code for almost 3 days, and I haven’t been able to find the right answer to fix my problem. My problem is that when using ScrollView, as shown on my code above, it doesn’t show the entire page, Can any one help me please, or explain to me why is giving me this error.


#2

You are nesting the layouts too much. An easy fix could be,

<GridLayout tkMainContent class="m-5" rows="auto,auto,*">
		<StackLayout row="0" class="p-10 border m-5">
			<Label class="h2" text="Our History"></Label>
			<Label class="body" text="Started in 2010, Ristorante con Fusion quickly established itself as a culinary icon par excellence in Hong Kong. With its unique brand of world fusion cuisine that can be found nowhere else, it enjoys patronage from the A-list clientele in Hong Kong."
			 textWrap="true"></Label>
			<Label class="body" text="Featuring four of the best three-star Michelin chefs in the world, you never know what will arrive on your plate the next time you visit us. The restaurant traces its humble beginnings to The Frying Pan, a successful chain started by our CEO, Mr. Peter Pan, that featured for the first time the world's best cuisines in a pan."
			 textWrap="true"></Label>
		</StackLayout>

		<StackLayout row="1" *ngIf="leaders">
			<Label class="p-5 h2" text="Corporate Leadership"></Label>
		</StackLayout>

		<StackLayout row="2">
			<ListView [items]="leaders" class="list-group">
				<ng-template let-leader="item">
					<StackLayout orientation="horizontal">
						<Image row="2" col="0" rowSpan="2" height="60" width="60" [src]="BaseURL + leader.image" class="img-circle"></Image>
						<GridLayout class="list-group-item" rows="auto auto auto" columns="*">
							<Label row="0" col="0" [text]="leader.name" class="list-group-item-heading"></Label>
							<Label row="1" col="0" [text]="leader.designation" class="list-group-item-heading"></Label>
							<Label row="2" col="0" class="list-group-item-text" [text]="leader.description" textWrap="true"></Label>
						</GridLayout>
					</StackLayout>
				</ng-template>
			</ListView>
			<ActivityIndicator busy="true" *ngIf="!(leaders || leaderErrMess)" width="50" height="50" class="activity-indicator"></ActivityIndicator>
			<Label *ngIf="leaderErrMess" [text]="'Error: ' + leaderErrMess"></Label>
		</StackLayout>
	</GridLayout>

But this will make only the list scrollable, if you want entire page to be scrollable you will have to use Header and Footer views which is available only in RadListView.


#3

Sorry for late response. Thank you for the input.