NativeScript-Grid-View- Issue with Dynamic Labels



Hello All,

I am using nativescript-grid-view for dynamic grid view. The label is
XML View:
<GridLayout class="margin"> <gv:GridView items="{{ items }}" colWidth="24%" rowHeight="15%" padding="5" itemTap="gridViewItemTap" itemLoading="gridViewItemLoading" loadMoreItems="gridViewLoadMoreItems"> <gv:GridView.itemTemplate> <GridLayout class="{{ status == 'skipped'? 'skipped': status == 'tbd'? 'tbd': 'all' }}" style="margin: 5; border-radius: 50"> <Label text="{{ 'I ' + value }}" class="{{ status == 'skipped'? 'skipped': status == 'tbd'? 'tbd': 'all' }}" style="font-size: 15" verticalAlignment="center" horizontalAlignment="center"/> </GridLayout> </gv:GridView.itemTemplate> </gv:GridView> </GridLayout>

TS File:
public items = new ObservableArray();
for (let loop = 0; loop < 65; loop++) {
this.items.push({value: (loop + 1), status: status});

Some of the labels in this some grids is displayed partially. This happens only when the label is populated dynamically and not when I use a hardcoded value. Not sure what is going wrong. I tried to create a playground example but I am not sure how to import third party module like NativeScript-Grid-View.

I have attached the screenshot for your reference.



The solution for this issue can be found at