Ionic Virtual Scroll: Styling in Grid Error

Ionic Framework ionic-v3
1

Hi, I’m using Ionic 3 and encounter these errors:

I have this virtual list, the code looks like this:

<ion-list [virtualScroll]="pageContent">
    <div *virtualItem="let items" class="gallery">
        <img src="{{items.img_url}}">
    </div>
</ion-list>

This is the SCSS

    .gallery
    {
        width: 110px;
        height: 110px;
        margin: 4px;
        overflow: hidden;
        display: inline-block;
        float: left;
    }

    .gallery img
    {
        object-fit: cover;
        width: 110px;
        height: 110px;
    }

It doesn’t work.

I expected this in display:

Item 1 – Item 2 – Item 3
Item 4 – Item 5

But I got this instead:

Item 1
Item 2
Item 3
Item 4

I tried to analyze, and found that the ionic generates and use transform CSS to arrange the location for each item.

How to solve the problem?

Thanks,
JR

2

The truth is that a virtual list depends on evenly height/width items because it has to calculate whatever comes into the viewport (thus it needs fixed dimensions). So a custom grid unfortunately in combination with virtual scroll isn’t going to work if items aren’t in the same dimension. That’s why the virtualscroll drops all items after each other.

Solution 1: Don’t use virtualscroll unless dimensions are fixed.
Solution 2: If you have lots of data, use an infinitescroller instead. This will prevent the page from clogging up by default only showing 30-40 something items.