I have an Ionic 3 application where I have a list of items, where each item contains an image (some may have the same image, some others).
The list items can change width depending on screen width, which I do via media queries, eg…
@media screen and (min-width: 300px) {
.mm-card-outter {
width: 100%;
}
}
@media screen and (min-width: 500px) {
.mm-card-outter {
width: 50%;
}
}
@media screen and (min-width: 1000px) {
.mm-card-outter {
width: 33%;
}
}
I wish to make the width virtual (as larger numbers of items were making it a bit clunky), so I have set up the virtual list as follows…
<ion-content>
<ion-list style='background-color: pink' [virtualScroll]="filteredData">
<ion-item *virtualItem="let item" class='mm-card-outter' approxItemHeight='77px'>
<div class='mm-card-inner'>
<ion-grid>
<ion-row>
<ion-col class='bar-col' [style.background-color]='item.colour'></ion-col>
<ion-col class='card-icon-col'>
<ion-img width="40" height="40" [src]='item.image'></ion-img>
</ion-col>
<ion-col class='mm-card-main-data-col'>
<div><b>{{item.item1.description}}</b></div>
<div >{{item.item2.description}}</div>
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-item>
</ion-list >
</ion-content>
The complete example can be seen at this plunk. The styles, including the media queries I’ve put into index.html
I have a couple of issue, but the first is the image in the ion-img does not always appear, and can appear and disappear as you scroll. If I use just a standard img it is ok, but as per doco we want to use the ion-img as it is designed for the virtualisation.
In my proper app, this is a local image installed with the app, but here I have just used an online image so I can show it in plunkr (both local and online images have the same problem)
Does anyone have any idea what is wrong with the image display in this example?
Thanks in advance for any suggestions.