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

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?

[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).

[jase88]

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