IOS statusbar padding

Ionic Framework ionic-v3
1

Hey folks,

I tried really everything, but I’m not able to get rid of the statusbar on my IOS device.

I tried the following things:

statusbarPadding: false

$cordova-ios-statusbar-padding: 0px;

.ios ion-nav > .ion-page > ion-content.statusbar-padding:first-child .scroll-content{
   padding-top: 0px !important;
}

and of course… with true/false…

platform.ready().then(() => {
   statusBar.overlaysWebView(false);
   statusBar.hide();

…but nothing seems to work. Attached a picture of the behaviour from Ionic View.

Does anyone have a solution?

Thanks,
Oliver

image
IMG_4997.PNG640×1136 83.5 KB

2

Wow i’m testing on IOS (android is fine) and got a very similar problem!

image
Simulator Screen Shot 22 May 2017, 17.51.29.png640×1136 383 KB

3

When I have seen this, there is usually incorrect ionic tags used in the header or some custom CSS that is having unintended consequences.

4

So far i’ve understood that overlaywebview must be true for IOS otherwise Ionic goes buggy/crazy.

If you want to try, but i gaved up because the google map plugin will be displaced by 20px vertically you have to:

  1. set statusBar.overlaysWebView(false)
  2. into the App’s config module add the config’s option: statusbarPadding:false

But as i said i think this will introduce a 20px white padding in your footer, at least with google’s map plugin :frowning:

1 Like