CODEWITHSUNDEEP
ioscssangularios-simulatornativescript
Flyn Sequeira
Flyn Sequeira

Reputation: 690

ListView on Nativescript+Angular is taking up only half of the vertical screen. Using Iphone simulator

I have a listview under actionBar, which seems to be taking only half of the screen vertical real estate. The list scrolls within half of the screen. 

<StackLayout orientation="vertical" height="100%">
    <ActionBar class="action-bar">
        <NavigationButton visibility="collapsed"></NavigationButton>
        <GridLayout columns="auto,*,auto" height="100%" width="100%">
            <Label col="0" text="&#xf0c9;" class="fa" (tap)="onDrawerButtonTap()"></Label>
            <Label col="1" text="Menu" class="action-bar-title"></Label>
        </GridLayout>
    </ActionBar>
    <!-- <ScrollView orientation="vertical"> -->
        <ListView [items]="restaurant_menu" class="list-group">
                <ng-template let-item="item" let-i="index">
                    <StackLayout orientation="vertical" class="list-group-item">
                        <Label [text]="item.name"></Label>
                        <GridLayout columns="*,auto,auto,auto" rows="auto" orientation="horizontal" class="list-group-item">
                            <Label [text]="'Rs. '+item.price" col="0" row="0" verticalAlignment="top"></Label>
                            <Label *ngIf="order && order[item.name]>0" text="-" col="1" row="0" verticalAlignment="top" horizontalAlignment="right"></Label>
                            <Label *ngIf="order && order[item.name]>0" [text]="order[item.name]" col="1" row="0" verticalAlignment="top" horizontalAlignment="right"></Label>
                            <Label (tap)="build_order(item.name, '+')" text="+" col="1" row="0" verticalAlignment="top" horizontalAlignment="right"></Label>
                        </GridLayout>
                    </StackLayout>
                </ng-template>
            </ListView> 
    <!-- </ScrollView> -->
</StackLayout>

setting the height to 100% doesn't change the outcome. What am I missing? I'm using native-core-theme and no css changes that dictates the height.

Upvotes: 0

Views: 510

Answers (1)

Manoj
Manoj

Reputation: 21908

Try removing the StackLayout above ActionBar. ActionBar should be part of Page instance or just at root level in case of {N} Angular. ListView can be placed just below it, you don't need a StackLayout to wrap them up.

Upvotes: 1

Related Questions