Center items in RadListView in Nativescript

Question

I can not center the elements of a RadViewList in the middle of the screen in a nativescript-angular app. See in Playground: https://play.nativescript.org/?template=play-ng&id=ZFOHYN&v=4

I tried several methods without result: FlexBoxLayout, horizontalAlignment and verticalAligmnent, inline css, css display flex..

See in Playground: https://play.nativescript.org/?template=play-ng&id=ZFOHYN&v=4

<StackLayout class="page">
    <GridLayout tkExampleTitle tkToggleNavButton>
        <RadListView col="1" [items]="name" 
            selectionBehavior="LongPress"
            multipleSelection="true" reorderMode="Drag" 
            backgroundColor="gray"
            height="100%" itemReorder="true" padding="10">
            <ng-template tkListItemTemplate let-item="item">
                <GridLayout>
                    <Label [text]="item" textAlignment="center" 
                        witdh="95%"
                        height="95%" margin="5px" padding="15px"
                        backgroundColor="red" fontSize="30"></Label>
                </GridLayout>
            </ng-template>

            <ListViewGridLayout tkListViewLayout 
                 scrollDirection="Vertical"
                ios:itemHeight="250" spanCount="5"> 
            </ListViewGridLayout>
        </RadListView>
    </GridLayout>
</StackLayout>

the element stay at the top left corner !!

... also, there is a spelling error in Label- it says witdh="95%" instead of width. — Tim

Tim Tim · Accepted Answer · 2019-08-26T11:11:36

Try adding vertical alignment like this to your inner grid:

<GridLayout class="vcenter">
...

having this in your stylesheet:

.vcenter {
    vertical-align: center;
}

Center items in RadListView in Nativescript

2 Answers