Issue with offset-top on ion-content in Ionic 5

Hello,

I’m trying to have a transparent header with toolbar over my content in my Angular Ionic 5 project.

The problem with the content is that, while it scrolls under the header and the header is transparent, when the page renders the content is actually spaced after the header.

I’ve noticed in css that ion-content has --offset-top set to something like 44px
If i try to remove that offset and set it to 0, the content looks ok on certain resolutions, but on others it places the content way above, cutting it off.

I have no idea what else to do. Everything I found online, mostly regarding to ionic 4, just setting the css of the header to transparent background and fullscreen on content should’ve worked… except it doesn’t. I have run out of ideas. Please help.

<ion-header mode="ios">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button color="dark">
        <img src="assets/Meniu_Icon_1.png" />
      </ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen="true">
  <ion-slides pager [options]="slideOptsOne">
    <ion-slide>
      <div class="slide">
        <img src="assets/listing/Container_poza_1.png"/>
      </div>
    </ion-slide>
    <ion-slide>
      <div class="slide">
        <img src="assets/listing/Container_poza_2.png"/>
      </div>
    </ion-slide>
    <ion-slide>
      <div class="slide">
        <img src="assets/listing/Container_poza_3.png"/>
      </div>
    </ion-slide>
  </ion-slides>
</ion-content>
ion-toolbar {
    --background: transparent !important;
    --ion-color-base: transparent !important;
    --border-color: transparent;
}

ion-content {
    --offset-top: 0 !important;
}

For anyone finding this thread, I think I fixed it by adding the header inside the content and marking it fixed.

<ion-content [fullscreen]="true">
  <ion-header mode="ios" slot="fixed">
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-menu-button color="dark">
          <img src="assets/Meniu_Icon_1.png" />
        </ion-menu-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>
  <ion-slides pager [options]="slideOptsOne">
    <ion-slide>
      <div class="slide">
        <img src="assets/listing/Container_poza_1.png"/>
      </div>
    </ion-slide>
    <ion-slide>
      <div class="slide">
        <img src="assets/listing/Container_poza_2.png"/>
      </div>
    </ion-slide>
    <ion-slide>
      <div class="slide">
        <img src="assets/listing/Container_poza_3.png"/>
      </div>
    </ion-slide>
  </ion-slides>
</ion-content>
1 Like

But with your Solution, if the content is scrolled up it doesn’t hide behind the header and could look buggy with Title or Buttons right? Have you solved this somehow?

But it does go under, the header is fixed because of the slot=“fixed” part. Have you tried it and it doesn’t do the same?

In my App i need a Background Image behind the whole Page (Header included), but the Content should hided if scrolled under the Content. At the Moment i solved this by adding the Image to the Page itself (<ion-some-page>) but this breaks the Nav Animation so i changed this too, bit this is not the best solution i think

In the Conference demo App, they use the technique of placing ion-header inside ion-content to achieve this (the “speaker-detail” and “about” pages are two examples). But if you get to the official documentation you can read this:

Blockquote
Header is a parent component that holds the toolbar component. It’s important to note that ion-header needs to be the one of the three root elements of a page
https://ionicframework.com/docs/api/header

So even if it seems to work well, my concern is if it’ll break something I can’t see now.

1 Like