Using virtualScroll in Ionic 2 with <ion-card>

pascal.brokmeier
· 3 min read

Update: This article is over 8 months old now and Ionic 2 has developed a lot since then. Please don’t consider this information to be valid anymore, the team has worked hard and (without checking if it works now) I don’t want to criticize something that might very well have been fixed by now! Instead consider one of my newer posts about Ionic


Context: I am writing a small platform for a closed community (~5000–50k ppl) to allow couchsurfing within this community. It doesn’t do much. Posts, comments, linking to FB and most importantly filtered notifications.

TL;DR: add some css into the ion-card and put a spacer below

Using virtual scroll in ionic is useful when you want to display very long lists. What does it do? Read up the article below to find out.

To get some quick c&p ready code snippets I went here instead. This guy was just straight to the point. But now came my problem: virtualScroll is made for <ion-list><ion-item></ion-item></ion-list> type of trees. I wanted a list of cards, no ion-item tags. They add lines, change margins and generally screw up the design of the card.

This is what I did:

<ion-list [virtualScroll]="posts" no-lines>
<div *virtualItem="let post" style="width: 100%">
<post-card [post]="post"></post-card>
<div style="height:10px"></div>
</div>
</ion-list>

Basically you use a container div as a repeating container and make it 100% width again. Then you add a 10px spacer below each element, to fix the margin-folding, because virtual scroll seems to use some js to figure out how high the element is when its rendered and then puts a wrapper around it with a fixed height. This doesn’t bother with the ion-card margins though, so the spacer fixes the design.

You can change the inline css to make it more generalistic (css tag on *[virtualScroll]>post-card e.g.) but this is the easiest to understand.

Here is the difference (old vs new):

old
new (with annoying jump bug) 😏

There’s not really much to see aside from the fact that the new one is jumping back to the top which is an unpretty thing. I’m still working on this. But the benefit is that I can now handle huge lists (which I don’t have yet because my app is still not public and therefore posts aren’t rolling in yet.

curiouscaloo

Anything about technology and where our society and technology is heading towards

pascal.brokmeier

Written by

Software Developer, Tech enthusiast, student, board sports and food lover

curiouscaloo

Anything about technology and where our society and technology is heading towards

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade