3

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?

keszok
  • 67
  • 5
  • Please post complete code including CSS. Also why do you have two `` entries? This is certainly at the root of your issue. Remove the one within `` –  May 16 '22 at 13:30
  • I have the same issue. The default ionic menu template worked fine on v5 and after upgrading to v6 the top is cut off on Android devices. On chrome its showing correctly. – Sachithd Jun 17 '22 at 11:56

3 Answers3

1

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);
}
Hector Engel Rodríguez Torres
  • 11
  • 2
0

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.

Sachithd
  • 470
  • 6
  • 6
0

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