Ionic 4 - Scrollable List - Needed

#1

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.

#2

Have you tried having multiple <ion-content> tags in your template.?

#3

I did. Wrapping the list in it’s own causes it not to appear at all…

Any other suggestions?

#4

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;
}
#5

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.

#6

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.

#7

Thanks Chris.
I’ve been playing around with the CSS for and should be able to make it work.

Thanks for your help.