Bug in Ionic View and DevApp: Different ion-header height in same app

@rfarko wrote:

I recently faced this issue with two of my apps when testing with Ionic View and Dev App. 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 (ion-header) height on the device. This causes the title of some pages overlap with phone status bar.

Here is an example from one of my apps in Ionic DevApp:
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');

In Ionic View I see both pages with the short header!

Please let me know if anybody else is experiencing the same problem.

Posts: 2

Participants: 1

Read full topic