Non-scrollable area

Ionic Framework ionic-v3
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