Nativescript: ListView scrolling is changing the width of template elements

[shabib3]

Hi :)

I am creating a chat view on ListView, and I stuck in a bug while scrolling the ListView.
When I am scrolling the list view the item width changed, and I don't know why.

I reproduced the problem in this Playground Project with actual data that come from my server, because cannot reproduce it with other data, so sorry if it will be complicated but I tried to simple it as I can.

Also here is a screenshot of the problem in my app -> https://www.youtube.com/watch?v=7FSA5kyjOb4&feature=youtu.be (Pay attention to the marked 'D' message)

[NickIliev]

@shabib3 the thing is that on iOS the ListView cells should have a predefined size. When the data is loaded locally the items size is calculated and the issue is not reproducible. However, when the data is coming asynchronously (e.g. from your server) the list view cells are remeasured after the data is received and this is causing a bug when the items are recycled while the list view is scrolled.

To resolve this issue on iOS either use some predefined size for your items containers (the Stack layouts) or use the rowHeight property to assign some predefined height size (which will be reused when the ListView is recycled and the cells wont change their size on scroll).

Do let me know if the suggested solutions above are resolving your issue.

[shabib3]

@NickIliev - Thank you for the comment.

So two things:

• actually this happens to me on android...didn't test it yet on IOS.
• I tried the rowHeight solution and it didn't work. (I tried also set the height in the ListView's children)

I actually also suspected on the data that comes asynchronously...but as you can see I succeed reproduce it with local data in the playground sample I attached in the first message.

Any more ideas? :)

Thanks!

[NickIliev]

@shabib3 I was able to reproduce the issue and am currently investigating it. Seems like a big - will post any additional info here

[NickIliev]

@shabib3 indeed this is unexpected behavior and we will investigate further.

Meanwhile, a possible solution would be to dynamically assign width for your Label based on the text received async. I've managed to achieve that with the following code

<GridLayout columns="*" class="message-item active-user-message-item" >
    <Label [width]="(item.text.length * 10) + 30" (loaded)="onLabelLoaded($event)" class="message-text absolute-center" [text]="item.text" textWrap="true" horizontalAlignment="right"></Label>
</GridLayout>

Full Playground demo here

[shabib3]

@NickIliev - it is a little bit sloppy workaround cause if I have spaces in the string it has different width.

For now I actually prefer this situation... I will wait until the bug will be fixed :)

Thanks

[NickIliev]

+1 from https://github.com/NativeScript/NativeScript/issues/5348

[bozhidarc]

Sorry for hijicking the post, but @NickIliev is the loaded event on the label is called after UI measure pass?

[shabib3]

@NickIliev - any update?
I encountered the bug in another issue - https://github.com/NativeScript/NativeScript/issues/5621

[ADjenkov]

Hi @shabib3,

You should try setting textAlignment="left" and textAlignment="right" on both the Labels. I've just tried your Playground Project with it and it works as expected. Consider using textAlignment on Label when positioning the text itself.

_PS: Despite the solution with textAlignment there is still a bug on our side that displaces the text inside Label when scrolled._

[NickIliev]

Closing the issues in favor of https://github.com/NativeScript/NativeScript/issues/5793

[sagar1911]

This is also happening in core nativescript. While scrolling for more items the label is stretching up.

[coddicat]

just use min-height or min-width