this.statusBar.overlaysWebView(false) not working on iOS

Ionic Framework ionic-v3
1

Hello,

I have noticed in my iPhone app that the tool bar I have defined in the app.html “flows” into the top as follows:

image
image.jpg309×541 33.1 KB

Here is the content of my app.html

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>My App</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list no-lines>
    </ion-list>
  </ion-content>

</ion-menu>

Here is the initialize function within app.component.ts which is called from the constructor.

initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.statusBar.backgroundColorByHexString(’#151515’);
this.statusBar.overlaysWebView(false);
this.splashScreen.hide();
});
}

I thought be setting this to false I would not have this issue. I only see it on iOS. Android looks fine.

Any ideas as to what to do to fix this?

Thanks,

Brent

1 Like
2

That is kind of strange because I wanted statusbar not to overlay with the webview. So I use StatusBarOverlaysWebView false.

May be you have to set it to true?
And you can do it in config.xml
<preference name="StatusBarOverlaysWebView" value="true" />

3 
<preference name="StatusBarOverlaysWebView" value="false" />

worked for me. I put it in config.xml

4

This solution didn’t work for me :pensive: