Ionic iOS status bar

Ionic Framework ionic-v3
1

Hello,

I just started developing with Ionic and Cordova last week so I have the latest and greatest for plugin versions. I am running into this issue here, not just in the browser view but when I deploy to my device:

I have been googling for the past few hours but nothing seems to help. I am using the master git version for the status bar plugin, I tried switching the status bar from the default to the web one with a false parameter. Some people suggested using CSS and making the margin top or just plain top 20 but that was moving everything down, not just my app.

Any help would be great! Thanks!

1 Like
2

Same issue here. I just put the whole content down a bit like you said already to avoid the problem. :cold_sweat:

3

I wonder what we are doing wrong. I am surprised there are not more threads about it.

4

I might have a solution wich I didn’t tested yet, maybe you can test it out ? :blush:

import { StatusBar } from '@ionic-native/status-bar';

constructor(private statusBar: StatusBar) { }

...

// let status bar overlay webview
this.statusBar.overlaysWebView(false);

//**ALTERNATIVE**
//this.statusBar.styleDefault()

Add this to your main.ts.

Alternatively you have to add this aswell styleDefault(). Try it without first and then with it.

Post your results please :rabbit2:

5

Didn’t work for me…I have tried that before as well. How about you?

6

This worked for me
add viewport-fit=cover to veiwport meta tag in your index.html so it resembles this…
<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">

See this issue

7

already added but no use

8

Hey @akash705

  • The solution I proposed stopped working for me as well

I found this issue:

  • This seems to fix it when I test it in iOS Simulator
this.platform.ready().then(() => {
      // this.statusBar.styleDefault();
      this.statusBar.overlaysWebView(true);
      this.statusBar.backgroundColorByHexString('#ffffff');
      this.splashScreen.hide();
    });

Hopefully this helps

9

I’ve had some issues with status bar and I resolve all of them by using wkwebview.
Could you ensure that you are using this webview (or the ionic fork : cordova-plugin-ionic-webview) ?