Ionic-framework: ion-virtual-scroll - support for responsiveness and more than one item per row

[pjc2007]

Feature Request

On larger screens, I would like to display 2 (or perhaps 3) items side be side, rather than a single column, and to be able to change this via media queries (or some other mechanism if not possible via media queries).

Ionic version:
[x] 4.0.0-rc.0

$ ionic info
Ionic:

ionic (Ionic CLI) : 4.6.0 (C:\Users\Latitudeuser\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.0.0-rc.0
@angular-devkit/build-angular : 0.11.4
@angular-devkit/schematics : 7.1.4
@angular/cli : 7.1.4
@ionic/angular-toolkit : 1.2.2

System:

NodeJS : v10.15.0 (C:\Program Files\nodejs\node.exe)
npm : 6.1.0
OS : Windows 10

Describe the Feature Request
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). Would also like to be able to change this using media queries so that the number of columns may depend on the orientation of a tablet, or perhaps window size (resized) if running on a desktop .

Describe Preferred Solution
Simply allow more than one item per row when we have the app running on a wider window

Describe Alternatives

Related Code

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<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; align-items:center'>{{item.text}}</div>
     </div>
    </ion-item>
  </ion-virtual-scroll>
</ion-content>

ion-virtual-scroll{
  display:grid;
}

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

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

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
   public items: Array<Item>;

   constructor() {
    this.items = new Array<Item>();
     for (let i = 0; i < 10000; i++) {
       let item = new Item (this.getImage(i), `this is item ${i}`);
       this.items.push(item)
     }
   }

   private getImage(i : number) : string {
     switch (i % 3) {
       case 0: return 'assets/img/img-0.png';
       case 1: return 'assets/img/img-1a.png';
       case 2: return 'assets/img/img-1b.png';
       default: return 'assets/img/img-0.png';
     }
   }
}

export class Item {
  constructor(
    public img: string,
    public text: string) {   
  }
}

Additional Context
This is essentially a repeat of a forum question I have posted here,

From the looks of it, perhaps what I am after is not currently supported?

[paulstelzer]

I don't know if this is possible. What do you think @manucorporat ?

[pjc2007]

The previous version (Ionic 3) did allow this, but the redrawing never worked correctly when a media query caused the width the number of elements per row to change. ion-img never seemed to work for me in Ionic 3, but this now seems to work in this new version, we just seemed to have lost the ability to allow for the more than one item on each row, which is desirable on a wider screen, otherwise there can be a lot of wasted space for items that don't need much width.

[brenden-t-r]

Any plans for adding this in the future?

[lincolnthree]

It's definitely possible. I use https://github.com/rintoj/ngx-virtual-scroller for this exact reason. Would love to use ionic's component, but unfortunately we can't until this is supported!

This component also does not require specifying an item height, and it still performs just as well as the ion-virtual-scroll component (from my testing).

[pjc2007]

@lincolnthree thankyou! I will try it myself, but interested if works with width not 100%, eg 33%. Even better if it picks up a width change via a media query (just like a non virtual scroll). If so, and works within an Ionic page, then this is exactly what i am after (even fixed height is ok for me, just need variable width)

[lincolnthree]

@pjc2007 It should. Though I've found it does have some issues of its own lately. I'm trying to get things working reliably for various situations by switching back and forth between ion-virtual-scroll and virtual-scroller depending on display modes/etc. Ionic seems more reliable for single column layouts.

[kerosin]

@liamdebeasi
Any plans to support dynamic heights for virtual scrolling?

[ShakesVision]

End of 2020 and Ionic 5, do we have a chance with this issue?

I'm going to try out angular virtual scroll mentioned above, for now. But I hope this gets incorporated somehow. In my case, they were just words, and using one word/line is plain silly.