Width of ion-item changes when VirtualScroll is implemented

Ionic Framework ionic-v3
1

With *ngFor the ion-item was occupying full screen… but when i applied virtual scroll, items width got some issues as shown below

image
Screenshot (10).png343×620 40.7 KB

image
Screenshot (11).png1366×708 39.9 KB

event.html
<ion-item text-wrap style="padding-left:1px">

    <ion-row>
        <ion-col width-25>
            <center><p>TITLE</p></center>
        </ion-col>

        <ion-col width-66 style="padding:0px;">
            <p style="font-size:1.4em;">MAIN TITLE</p>
            <p>SESCRIPION</p>
            <p>DESCRIPTION2</p>
        </ion-col>

        <ion-col width-5 style="padding-top:2em;margin-left:17px;">

            <ion-icon md="ios-arrow-forward"></ion-icon>

        </ion-col>
    </ion-row>

    <ion-row>

        <ion-col width-33 style="margin-left:6.2em;margin-top:-19px;">

            <p  style=" margin:0px;"><ion-icon name="person"></ion-icon>DETAIL1</p>

        </ion-col>

        <ion-col style="margin-right:0px;margin-top:-19px;" width-33>
            <center>
                <p  style=" margin:0px;"> <ion-icon name="cash"></ion-icon>  DETAILS2</p>
            </center>
        </ion-col>
    </ion-row>
</ion-item>

(wasn’t able to fit the code properly so have to give the first line like that only)

home.html

<ion-list [virtualScroll]="events">
            <div *virtualItem="let event">
                <event-card [event]="event"">
                </event-card>
            </div>
        </ion-list>

can anyone suggest how to remove this unwanted padding on right?

2

Can you open an issue for this. This seems like a serious bug and should be fixed.

3

I tried it in some other pages also it behaves likes this whenever we put div tag inside the ion-list tag(generally it should be ion-item inside ion-list but here i am getting ion-item from a directive so have to go with div only).
Ok i’ll create an git issue.

<ion-list [virtualScroll]="events">
            <div *virtualItem="let event">
                <event-card [event]="event"">
                </event-card>
            </div>
        </ion-list>
4

.virtual-scroll .virtual-position,
.virtual-scroll .virtual-position.item {
position: absolute;
top: 0;
left: 0;
right: 0;
-webkit-transition-duration: 0ms;
transition-duration: 0ms; }

try this in your scss for the page. I had the same problem.

1 Like