iOs header size is too large

On iOs ( 8 but also 7 ) the header height is too big.

While tracking this I found that the scss says that :not(.fullscreen) should be 64px and adding fullscreen class to the body does make the trick.

Maybe i’m not getting it right but if fullscreen means no status bar that’s not what I want and if not should I and how can I add the fullscreen class the body?

EDIT : adding ionic.Platform.fullscreen(); the app is fullscreen and the header height is ok but no status bar. Which is the intented way I think but why then removing fullscreen makes the header that tall?

Many Thanks

So a little loss in what you are asking here.

ionic.Platform.fullscreen(); will hide the status bar and make the header bar only 44px tall.

If the app is not fullscreen, the header will get an extra 20px to accommodate iOS’s status bar.

What seems to be the issue?

Thanks @mhartington the issue is that if not fullscreen, the header is 64px tall ( the +20 you’re talking about I think ) but i’m not sure you need to compensate the status bar. See the attached screenshot :

Hmm, maybe there’s a conflict in your css or an error in your js, are you seeing anything in you console?
I just tried this with this code

.controller('MainCtrl', function($scope,$ionicPlatform) {
  $ionicPlatform.ready(function() {

And the app worked fine


Sorry I if explained poorly the ionic.Platform.fullScreen() is working fine.

The screenshot I sent is without the fullScreen() and as you can see the header is taller than expected

Ahh alright, makes sense now.

Hmm, it maybe some conflicted css classes.
Any chance you could put together a codepen or post the project on github?

A codepen would not help since I only see it on device once build as an app.
The project cannot be posted on github because it’s a private one :frowning:
I’ll look into it and come back if I have more informations since I understand it’s hard to help with so few informations.

Well we can make a project from codepen so that would eliminate that issue.

If you want, send me a PM, you can always send me a copy of the project

I have the exact same issue in iOS. Any solution to this one?


We ended up customizing the css from ionic ( platform.scss )

I realized my issue is related to the fact that I am using Phonegap Build. By making changes to config.xml and adding the StatusBar.styleDefault(); script I managed to get it working better, not really sure how. The original statusbar is now hidden and the ios status bar content is on top of my app.

What config.xml to use when using phonegap build is really unclear. Theres no single place for information about this. Some settings is not working, maybe because phongap build has changed

I’m having a similar issue. I’ve updated to the latest version of Ionic, to be sure these aren’t solved issues.

Even when I put the call to ionic.Platform.fullScreen(); at the end of the .run block, the header is still too tall.

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required

    // make it fullscreen on IOS so it has the correct header size.

However, if I run ionic.Platform.fullScreen(); in Safari developer tools console after the app is completely done booting, the header gets the correct size.

OK so after some more investigation, I found that adding this preference to config.xml:

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

causes that same preference to be added twice to the generated platforms/ios/build/emulator/, once with a value of true and once with a value of false. I’m guessing this is possibly the cause of the issue?

Any help would be greatly appreciated!

In fact, $ionicPlatform.ready(function() never runs in the emulator at all.

What am I missing here?

OK apparently I had failed to use the --save flag when adding some of the plugins. It’s important that your plugin be declared in config.xml, apparently.

While I was at it, I blew away my platforms/ios and plugins directories for good measure, as well as updated cordova itself & moved from deprecated plugins to more recent versions. All in all, things working better now.

And I’ve verified that even with all-new everything, setting <preference name="StatusBarOverlaysWebView" value="false"/> in config.xml causes that preference to show up twice in the generated configs, which breaks things.

Exact same issue here, is it possible to get the css that fixed it plz ? (working on android too if possible :wink: )

Same issue here also! Headers on iOS are way too tall, have to manually fix in CSS. I’ve set my status bar in config.xml to be solid (I set the overlay property to false also as I wanted this to be separate).

Here are the CSS fixes I wrote to make everything work properly (If you find them useful, some kudos would be nice! :wink: )

/*Disabling platform specific tweaks */
.platform-ios.platform-cordova:not(.fullscreen) .bar-header
  height: 44px !important;
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader)
  height: 44px !important;

.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader).item-input-inset .item-input-wrapper
  margin-top: 0px !important;

.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > *
  margin-top: 0px !important;

.platform-ios.platform-cordova:not(.fullscreen) .tabs-top > .tabs, .platform-ios.platform-cordova:not(.fullscreen) .tabs.tabs-top
  top: 44px !important;

.platform-ios.platform-cordova:not(.fullscreen) .has-header, .platform-ios.platform-cordova:not(.fullscreen) .bar-subheader
  top: 44px !important;

.platform-ios.platform-cordova:not(.fullscreen) .has-subheader {
  top: 88px !important;

thanks @bnawaz168 you saved my time, but i still hope ionic will provide another flexible way on this improvement

1 Like

Thanks, this works.
Apparently Ionic does not cover the case when you want the Status bar to be visible but NOT overlapping the WebView, so the css fix is the only way to do it. Am I right, @mhartington?


Thanks, it works like a charm!

1 Like