Ionic 6 - Only half the header showing

user_18891032 0
Viewed 438

I am using Ionic 6 / Angular and have this html in a component:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Tab 1
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Tab 1</ion-title>
    </ion-toolbar>
  </ion-header>

  <app-explore-container name="Tab 1 page"></app-explore-container>
</ion-content>

In chrome mobile view it looks good but on my mobile I can only see half the header.

Here is a screenshot:

screenshot here

What is the problem?

ionic6 ionic-framework
3 Answers

This element needs a little padding.

You have to add a the variable ion-safe-area-top in the "variables.scss" file.

:root {
 ...

  --ion-safe-area-bottom: 22px;
}

Also you need to add styles for the first ion-toolbar inside ion-header element.

ion-header ion-toolbar:first-of-type{
    padding-top: var(--ion-safe-area-top, 0);
}
user_197463540

I had the same problem and this solved the issue for me.

As this issue only happens with Andriod, I defined a variabel to detect if the device is Android. If Yes then apply a padding to the header

In app.component.ts

if (this.platform.platforms().includes("android"))
this.isAndroid = true

In app.component.html <ion-header [translucent]="true" [class]="isAndroid? 'android-header' : ''">

In app.component.css

.android-header { 
padding-top: 20px; 
}
user_90042050

Not sure what the exact issue is but I was able to resolve it by

Creating a fresh project on v6 -> Copy the files from the old project across to the new -> rebuild the android app and the issue disappeared.

user_21108290
Related