How to remove the Ionic Statusbar padding on iOS

You might have searched for: “ion-toolbar too big”,“remove padding ion-toolbar”, “iOS Ionic empty space in toolbar”

Ionic is a great framework and all - but some issues like this one really grind my gears (image for reference :D).

I lost two hours today trying to figure out why there is some strange space in modal headers (or any headers really) - but only on iOS.

It turns out that Ionic detects if the app is running on iOS (presumably it checks which browser it is run in) - which is good - and applies a “save space” padding on every ion-toolbar element. The reason for this behavior is that iPhones have notches nowadays - so the padding is needed to display the title and buttons of the ion-toolbar at the correct position. This is great, too!

In the environment I’m dealing with, however, we host an Ionic app as a simple website and then embed it in a third party iOS application - as an iFrame. This leads to the effect that Ionic seems to think it is running as a full-screen iOS app and thus wants to add the padding even if the application is not running as a full-screen app. In my case there is a second toolbar belonging to the third party app on top, so the padding is not needed there.

Another funny effect is when you change the size of a ion-modal to not be the full height and use a ion-toolbar to display buttons and title: in this case the padding gets applied in the middle of the screen - which actually was the “Bug” I had to fix.

It might then look like something like this:

Ionic modal with messed up header padding

… Now go ahead and find the fix if this only happens on iOS, and only happens when running as an iFrame! Safari Mobile worked like a charm, Ionic is clever enough to detect that, too.

Well, the easy fix (though not as easy to find, if you google the wrong words like me :D and not very clean) is to simply force the padding to always be 0. Like so:

ion-toolbar {
    padding-top: 0 !important;
}

EDIT: It seems I am blind, there is a cleaner way described directly below where I found the fix here:

https://github.com/ionic-team/ionic-framework/issues/21483.

So maybe better use that: define the safe-area in the css variables!

:root {
    --ion-safe-area-top: 20px;
    --ion-safe-area-bottom: 20px;
    --ion-safe-area-right: 20px;
    --ion-safe-area-left: 20px;
  }

Maybe this saved you some hours searching :) If you know of an even cleaner way of doing this, let me know at Mastodon!

Cheers, Basti