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

@neamtua wrote:

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.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.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;
}

Posts: 1

Participants: 1

Read full topic