Nativescript RadListView StaggeredLayout Issue

Question

I have a Nativescript Angular project where I am using RadListView trying to use the staggered layout. It works fine on Android but on iOS there is a spacing issue that I cannot figure out what is causing it.

HTML

<GridLayout class="page page-content" rows="*">
        <GridLayout margin="10">
                <RadListView height="100%" [items]="dataItems">
                        <ng-template tkListItemTemplate let-item="item" backgroundColor="transparent">
                                <StackLayout rows="auto, auto" borderWidth="1" borderColor="#ccc" margin="10">
                                        <Label class="h3" [text]="item.name"></Label>
                                        <Label class="descriptionLabel" [text]="item.description" textWrap="true"></Label>
                                </StackLayout>
                        </ng-template>
                        <ListViewStaggeredLayout tkListViewLayout scrollDirection="Vertical" spanCount="2"></ListViewStaggeredLayout>
                </RadListView>
        </GridLayout>
</GridLayout>

TypeScript

dataItems = [{name: "Item 1", description: "Lorem ipsum dolor sit amet."},
                 {name: "Item 2", description: "Maecenas ac massa eu odio porta efficitur at non leo"}, 
                 {name: "Item 3", description: "Nunc vitae tortor sodales, varius magna quis, faucibus justo."},
                 {name: "Item 4", description: "In finibus sem"},
                 {name: "Item 5", description: "Duis sed sem porttitor"}, 
                 {name: "Item 6", description: "Blandit est vel, viverra nisi."},
                 {name: "Item 7", description: "Etiam at nisl ultricies, consectetur libero non, iaculis est."},
                 {name: "Item 8", description: "Curabitur at lorem"}, 
                 {name: "Item 9", description: "Non lectus tempus congue ultricies eget tellus."},
                 {name: "Item 10", description: "In sed dolor sit amet velit tempus iaculis."},
                 {name: "Item 11", description: "Duis dictum nunc in neque"},
                 {name: "Item 12", description: "Mauris dignissim mi sit amet nulla tristique, id posuere urna volutpat mauris gravida purus."},
                 {name: "Item 13", description: "Etiam accumsan sapien eget eros convallis porttitor."}, 
                 {name: "Item 14", description: "Vivamus ac arcu"},
                 {name: "Item 15", description: "Vestibulum at elit eget sapien fringilla"},
                 {name: "Item 16", description: "Maecenas tempus enim et velit bibendum, eu consequat erat volutpat."}];

What if I don't want to apply a fixed height? That's sort of the point of the staggered layout is that height varies with each item. — keerl
It makes the problem worse. It makes each item the height of the screen. — keerl
use itemHeight in ListViewStaggeredLayout <ListViewStaggeredLayout tkListViewLayout scrollDirection="Vertical" itemHeight="100" spanCount="2"></ListViewStaggeredLayout> — Narendra

Manoj Manoj · Accepted Answer · 2018-10-16T13:19:12

I'm unable to reproduce the issue on my end either with or without the extra GridLayouts. At least in my opinion those layouts are not required actually. Here is the link to Playground.

Nativescript RadListView StaggeredLayout Issue

1 Answers