Issue about responsive grid in VirtualScroll list

Ionic Framework ionic-v3
1

I use resposive-sm in ion-list (using *ngFor) and everything is fine. But when I use virtualScroll and resposive-sm together, some columns (ion-col) are hidden.

I do the test in android phone device (hybrid mobile app).

For example, before using virtualScroll, the code likes that:
image

The list shows properly. When the screen is portrait, each item shows two rows for id and name. When the screen is landscape, there is only one row with two columns. That is what I expected.

After using virtualScroll, the sample code is:
image

Suppose we are in portrait screen at first, each item shows two rows for id and name. Then we rotate screen into landscape, the item shows two rows - one blank rows and one row showing id and name. The html does not repaint. Scrolling the list will cause repaint. And then turn back to portrait screen, the second row is hidden.

Seems responsive grid is not good support with virtualscroll. Is it any solution?

2

Anyone helps? Is it a bug for virtualScroll? @brandyshea @mhartington

3

At the moment, virtualScroll will not support ion-grid.

VirtualScroll assumes that all the items in the list will be a set width. This is how it calculates the items and is able to reuse the DOM nodes. With ion-grid and the sizing not being fixed, virtualScroll will not know how to relayout items.

It’s something we’re aware of though and want to enable.

4

Thank you. Hopefully it can support as soon as possible.

Can you help take a look at this problem? https://forum.ionicframework.com/t/memory-leak-using-virtualscroll-cause-app-crash-in-ios/79109

5

Hi. Have you made progress on this? Would be nice to have virtualScroll compatible with ion-grid.