Status bar overlaps navbar content

Ionic Framework ionic-v3
8

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