Hello.
I have a list in the middle of screen that needs to be vertically scrollable - not a page scroll. An example scenario is that I have 25 information records (items in list). I only have room to display 5 at once - need to scroll list vertically to see remaining records.
It seems that is no longer part of Ionic 4. I have seen reference to this, along with suggestions for using
- but I’ve not been able to get those suggestions to work.
Can someone direct me to how to implement a scrollable list and some possible examples or code snippits.
Thanks.
Have you tried having multiple <ion-content> tags in your template.?
1 Like
I did. Wrapping the list in it’s own causes it not to appear at all…
Any other suggestions?
I just tested this template in rc-1 and the middle content showed and scrolled.:
<ion-header>
<ion-toolbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding id="contentTop">
The world is your oyster.
<p>If you get lost, the <a target="_blank" rel="noopener" href="https://beta.ionicframework.com/docs/">docs</a> will be your guide.</p>
</ion-content>
<ion-content id='foo'>
<ion-list>
<ion-item>
<ion-label>Pokémon Yellow</ion-label>
</ion-item>
<ion-item>
<ion-label>Mega Man X</ion-label>
</ion-item>
<ion-item>
<ion-label>The Legend of Zelda</ion-label>
</ion-item>
<ion-item>
<ion-label>Pac-Man</ion-label>
</ion-item>
<ion-item>
<ion-label>Super Mario World</ion-label>
</ion-item>
<ion-item>
<ion-label>Pokémon Yellow</ion-label>
</ion-item>
<ion-item>
<ion-label>Mega Man X</ion-label>
</ion-item>
<ion-item>
<ion-label>The Legend of Zelda</ion-label>
</ion-item>
<ion-item>
<ion-label>Pac-Man</ion-label>
</ion-item>
<ion-item>
<ion-label>Super Mario World</ion-label>
</ion-item>
</ion-list>
</ion-content>
<ion-content padding>
The world is your oyster.
<p>If you get lost, the <a target="_blank" rel="noopener" href="https://beta.ionicframework.com/docs/">docs</a> will be your guide.</p>
</ion-content>
ion-content {
--background: rebeccapurple;
}
#foo {
--background: white;
}
1 Like
Thanks Chris.
I was able to get your code example to work, although not entirely sure it will accomplish what I need.
It seems the 3 sections will share proportional area of the screen. This could provide large gaps between sections that are not wanted. I’ve attached a screenshot of your code in action to depict this.
In my scenario, elements on screen need to be somewhat fixed in relation to one another. As well, I need to have a title above the scrolling list - and not scroll. If the list title is in above the list, then there could be a large gap or title could get ‘scrunched over’ if window is not high enough. Screen shot attached showing gap of title ‘Referrals’ over list.
Lastly, documentation states that only 1 in a single view.
Let me know if you have any other thoughts or suggestions. Not sure why Ionic would not provide a scrolling list with fixed header right out of the box… Cheers.
You can set the height of each <ion-content> area via CSS, rather than having Ionic set it. You can also play around with alignment options with flexbox to solve your layout requirements as well.
Thanks Chris.
I’ve been playing around with the CSS for and should be able to make it work.
Thanks for your help.
What should I do if the scrollable list needs to be inside a slides element?
If I use ion-content inside a slides, nothing shows up at all.
I need to have multiple scrollable lists, each within a slide.
2 Likes
I have the same issue, could you find a solution?
