Bug Report

Ionic Info Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)          : 4.0.0-rc.10 (C:\Users\Gordy\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-alpha.7
   @angular-devkit/core       : 0.7.0-rc.0
   @angular-devkit/schematics : 0.7.0-rc.0
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.0-rc.9
   @ionic/schematics-angular  : 1.0.0-rc.9

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : none

System:

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

Environment:

   ANDROID_HOME : not set

Describe the Bug Virtual scrolling no longer appears to work with a grid.

In Ionic 3.9.2 applying a virtual scroller to a grid was simple:

<ion-grid approxItemHeight="{{itemHeight}}px"  [virtualScroll]="items"
  <ion-row>
    <ion-col *virtualItem="let item">
      <graph [item]="item"></graph>
    </ion-col>
  </ion-row>
</ion-grid>

In version 4, this doesn't appear to be possible. You can no longer use an <ion-grid> as the root scroller as it has to be an <ion-virtual-scroll> element, and even width explicit widths and heights set to each individual element, I cannot get the elements to layout horizontally, in a grid/column like fashion, at all.

Is there a new method of laying out the items in say 3 or 4 columns with the new virtual scroller? Or is that functionality no longer present?

Shtibel commented 5 years ago

Same problem how can I use ion-virtual-scroll with grid ?

muhammed671 commented 5 years ago

same problem, please help

alex-migwi commented 4 years ago

same here

ryaa commented 4 years ago

you can have multi column view inside virtual scroll. For example, for a two column view inside virtual scroll make each of the virtual scroll item to be a pair of our original items and show them one after another in the single row. For example,

<ion-virtual-scroll [items]="pairs">
  <div class="row" *virtualItem="let pair">
    <div class="column">
     {{ pair[0] }}
    </div>
    <div class="column">
     {{ pair[1] }}
    </div>
  </div>
</ion-virtual-scroll>

timsar2 commented 3 years ago

Supporting dynamic multiple columns in ionic virtual scroll dev.to article

stackblitz: Try to resize screen

ionic-team / ionic-v3

4.0.0-alpha.8: Can't use grid with virtual scroll #646

Bug Report