Non-scrollable area

Ionic Framework ionic-v3
1

Hey guys,

is it possible to have a non-scrolling area? I have a view with an IonHeader, a Heading and some other elements, and an IonList. I want only the IonList to be scrollable and everything else stay fixed.

I’ve read that a possible solution is to just move elements like the Heading outside of IonContent. This does in fact work, but it messes up the view transitions.

I also tried moving the elements inside the IonHeader as well as creating a second header. This messes the transitions up a little less, but things are still not working as expected.

Any leads? What’s the proper way of doing this? I’m using Vue with Ionic.
Thanks!

2

The solution is to definitely use an IonHeader. What version of Ionic are you using, 6 or 7? I had some weird transition issues at first in my Vue app but was able to resolve them.

Please share some code, a stackblitz.com reproduction is optimal.

3

I’m using Ionic v 7. I created a repo:

https://github.com/sc00/view-transitions.ionic-vue

Tried to share it with Stackblitz, but I’m not sure how I can create an Ionic project :thinking:

Some additional info: I found that the problem only occurs when I move content to the IonHeader for both views.

4

I took a quick look and appears you did the same thing that I did at first which caused transition issues :sweat_smile: I found that you cannot have content in the header outside of IonToolbar, otherwise you’ll get content overlapping during transition. You either need to not use IonToolbar or make sure everything is wrapped in an IonToolbar. You can have multiple IonToolbar’s in an IonHeader which is what I did to fix it. Not sure if this is a bug in Ionic or not :thinking:

Try this:

<IonHeader class="ion-no-border">
  <IonToolbar>
    <IonButtons slot="start">
      <IonBackButton />
    </IonButtons>
  </IonToolbar>
  <IonToolbar>
    <h1>My Route Heading</h1>
    <div class="list-header">
      <h2>My List Header</h2>
      <IonButton>+</IonButton>
    </div>
  </IonToolbar>
</IonHeader>

In regards to StackBlitz, I am not too familiar with it, but what I do is start from an Ionic example from the docs and modify as needed…lol.

1 Like
5

Awesome, that did the trick! Thank you so much for your help!

I wonder if it’s a bug too. On first sight it doesn’t really feel intuitive to add toolbars for this purpose. But I might of course be missing something!

Hehe I’ll try and find one of these examples and familiarize myself with the platform. Looks promising

1 Like