I have an Ionic 3 application that has a list which I want to make virtual. The list items adjust there width via media queries so that they are the desired width for either phone, tablet, and for either portrait or landscape. For example on an average tablet there are 2 per row in portrait, but 3 for landscape.
So I use the following media queries …
@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%;
}
}
and the list is defined as
<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'>
<img width="40" height="40" [src]='item.image'/>
</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>
An example can be found at this plunk, but in the plunk the media queries don’t seem to work. I’ve put a video of it running in the browser here to show what I mean.
Does anyone have any ideas what else I may need to do so I can use a virtual list with responsive items?
Thanks in advance for any help!