Ionic 4 Virtual scroll with wrapping items for large screens

Ionic Framework
1

I am revisiting the Virtual scroll in Ionic 4, to see if I can now get it to do what I have always been after.

I have a list (which can be very large, depending on server data), so I want it to be virtual. Also, on larger screens, I would like to display 2 (or perhaps 3) items side be side, rather than a single column (which is what we want for phone size screen in portrait).

I have the following setup…

<ion-content padding>
  <ion-virtual-scroll  [items]="items" approxItemHeight='40px'>
    <ion-item id='outer' *virtualItem="let item">
     <div id='container'>
      <ion-img style="margin-right:10px" [src]="item.img"></ion-img>
      <div style='display:grid'>{{item.text}}</div>
     </div>
    </ion-item>
  </ion-virtual-scroll>
</ion-content>

And in the scss…

#container{
  display: grid;
  grid-template-columns: 30px auto ;
  grid-template-rows: 40px;
  justify-items: center;
  background: lightblue;
  width: 100%;
}

#outer{
  display :grid;
  grid-template-columns: stretch ;
}

@media screen and (min-width: 800px) {
  #outer{
    grid-template-columns: 50% 50%  ;
  }
}

So I have set the #outer id to each of the ion-item, and then use the media query to adjust the widths.

I have also tried with just floats widths etc rather than css grid, but nothing seems to get them to move up so more than one on each row,

I see the widths adjusting as expected as I resize the browser window…

image
image.png1216×290 16.3 KB

But my items are not wrapping.

Does anyone know if this is possible, and if so, how I can do this?

Thanks in advance!

2

I am starting to think this is not current;y supported, so have opened a feature request here

3

Is there any plans to support this or current workarounds?

4

I had same problem and i tried to make a trick:
fetching array index with pipe and pass it to virtual scroll items solve my problem.
https://dev.to/timsar2/how-ionic-virtual-scroll-support-dynamic-multiple-columns-and-infinity-scroll-38jm

try to resize screen in stackblitz:
https://stackblitz.com/edit/ionic-angular-v5-by5rkf?file=src%2Fapp%2Fapp.component.html

2 Likes
5

Thankyou I will check this out!

Just curious, will it support the list changing, i.e. in my case I poll live data, and sometimes the items in the view are added or removed (as well as just fields updated), so the list is not static

6

Wlc,
it must working but if dont, add tracBy to your ngfor