CODEWITHSUNDEEP
angulartypescriptionic-framework
Diesel
Diesel

Reputation: 5355

Ionic 4 Columns with ion-virtual-scroll not working

I have the current code:

<ion-grid>
    <ion-row>
      <ion-virtual-scroll [items]="places" approxItemHeight="200px">
        <ion-col size="12" size-lg="6" *virtualItem="let place">
          <ion-card (click)='viewDetails(place.id)' no-padding no-margin>

I want it to display my cards in two columns when the screen size is large. But it uses only one column of width 6 (50% of the screen) as shown below. If I remove the <ion-virtual-scroll> element and do an <ng-repeat> on the column it works great and makes two columns. Beta 19 here.

(Of note Ionic adds wrapping automatically, I'm trying to figure out why it's putting each element on a new row)

enter image description here

Upvotes: 1

Views: 1637

Answers (2)

Mohammad Reza Mrg
Mohammad Reza Mrg

Reputation: 2043

A trick for ion-virtual-scroll support dynamic multiple columns. you can use places index with pipe to fetch data from source ion-virtual-scroll support multi column

Upvotes: 0

Luis H. Moreno
Luis H. Moreno

Reputation: 91

It won't work with Virtual Scroll. Virtual Scroll was made to render just the items visible on screen, so, virtual items should have approximately the same height and if you do that, the algorithm to calculate the height of screen won't work for both platforms.

To do that you're proposing, you should create your own VirtualScroll component and do different things depending on the width of the screen.

Upvotes: 1

Related Questions