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

Ionic Framework
1

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.

Screenshot 2020-03-03 at 14.20.00
Screenshot 2020-03-03 at 14.20.00834×760 7.9 KB

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.

Screenshot 2020-03-03 at 14.22.27
Screenshot 2020-03-03 at 14.22.27836×374 4 KB

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;
}
1 Like
2

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>
3 Likes
3

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?

4

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?

5

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

6

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
ion-header: Header Parent Component for Ionic Framework Apps

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

1 Like
7

Yes, this is still happening.

8
ion-page { overflow: initial; }
1 Like