Different ion-header height in same app

@rfarko wrote:

I recently faced this issue with two of my apps. I am using the latest Ionic CLI and templates (v 3.18.0). The problem is that when adding pages to my app, for no reason, pages appear with different header () height on the device, causing the title of some pages overlap with phone status bar.

Here is an example from one of my apps:
The app has a main page (Dashboard), tapping on existing items opens “Page 1” and selecting New Item, opens “Page 2”:

image.png749x172 8.64 KB

image.png750x131 8.59 KB

Both pages have exact the same HTML header

<ion-header>
  <ion-navbar  color="primary">
    <ion-title>Page 1</ion-title>
  </ion-navbar>
</ion-header>

<ion-header>
  <ion-navbar  color="primary">
    <ion-title>Page 2</ion-title>
  </ion-navbar>
</ion-header>

and both are navigated to in same way:

this.navCtrl.push('Page1');

this.navCtrl.push('Page2');

I checked everything but can’t figure this out. I would appreciate if anybody can give me a clue that why this happens?

Posts: 1

Participants: 1

Read full topic