Status bar overlaps navbar content

Hi, I’ve updated my device to ios 11 and this is the result

The content of the navbar overlaps the statusbar.

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <img src="assets/icon/menu.svg">
    </button>
    <ion-title>Hello Ionic</ion-title>
  </ion-navbar>
</ion-header>

My versions:
ionic 3.7.1
cordova-plugin-statusbar 2.2.3

What would be the problem?

Try add this to config.xml

    <preference name="StatusBarOverlaysWebView" value="true" />
    <preference name="StatusBarStyle" value="lightcontent" />
1 Like

Same result :frowning:

From the Ionic Blog:

There is currently a PR open to update the cordova statusbar plugin but it has not been merged yet. We are expecting this to be merged very soon, but in the meantime you can install the plugin with that PR automatically by running the following commands:

ionic cordova plugin rm cordova-plugin-statusbar
ionic cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git

Also, make sure you update your viewport meta tag in your index.html to add the viewport-fit=cover field. This ensures the webview takes up the full size of the screen. The new default is to stick the webview in the new safe regions which is not what you want for Ionic/Cordova apps:

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

This change has been made to the base starter project for Ionic 1.x and 2.x and above, so new projects are covered.

1 Like

Thanks. This workaround with update to 3.8 of ionic package was the solution

Now on all ion-inputs the cursor appears on top of the text. If writes the text appear on the correct line but the cursor is on the above line…

On IOS 10 works correctly.

Any idea?

Use
viewport-fit=cover in index.html
example:

I find this works in both Android and iOS

In the app.component.ts file:

this.platform.ready().then(() => {
    this.statusBar.overlaysWebView(true);
    this.statusBar.styleLightContent();
});

index.html file:
Make sure you have viewport-fit=cover
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

app.module.ts file:
add statusbarPadding as on option in the config {statusbarPadding: true}

IonicModule.forRoot(MyApp, {statusbarPadding: true}),

Be sure to either build (or run) the platform:
ionic cordova build ios
ionic cordova build android

Play it in an emulator and test.

2 Likes

Just remove
this.statusBar.overlaysWebView(true);

4 Likes

Just a quick reminder,
If this issue only happens in some of the subpages, you probably used nav.push() inside a modal(this is depreciated).
To fix this issue, in your modal

import { App, ViewController } from 'ionic-angular';
 constructor(
      public viewCtrl: ViewController
      public app: App
    ) {}

replace push() with below

  //this.navCtrl.push(nextPage);
  this.viewCtrl.dismiss();
  this.appCtrl.getRootNav().push(nextPage);
3 Likes

Check here for the solution

I love you! Thanks! This solve the issue in ionic v3 and the overlaps :heart_eyes: :heart_eyes: :heart_eyes: :partying_face: