Header Bar, larger in Cordova build


I have a few ion-view’ss with ion-header-bar’s that look fine when browsing to the assets in a browser, but when they are deployed as an app, the headers have extra padding on the top. Has anyone else experienced the extra additional padding within the header?

PhoneGap/Cordova v3.3, latest ionic.


Yes, I have the same issue.


Do you have a screenshot or sample code. Is this with iOS 6 or iOS 7 or Android ?


Here is the screenshot.

It’s with iOS 7



Do have these settings in your config.xml?

    <preference name="fullscreen" value="true" />
    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />


I can confirm that the header bar never shrinks on iOS7 regardless of whether the statusbar is visible or not in the last three versions of Ionic Framework, just running the default install with ionic.Platform.fullScreen() or StatusBar.hide().


No idea what CAUSED this problem exactly except I have the same thing and have a short term fix that worked for me

a) I am assuming PhoneGap Build (where the status bar plugin was recently updated) (This hasn’t been mentioned in the thread so far)

b) Put this in your config.xml

<gap:plugin name="com.phonegap.plugin.statusbar" version="1.0.1"/>

That forces the previous version of the status bar, rather than the current one…

Fixed it for me… obviously there does need to be something that works with the latest version of the status bar plugin (available on Phone Gap build) … BUT this may help temporarily

This thread is the announcement (if you are on Phonegap Build)


Adding preferences didn’t work.
Adding gap plugin name=“com.phonegap.plugin.statusbar” version=“1.0.1”/> didn’t work

ionic.Platform.fullScreen() worked. Thanks @jough

@jough StatusBar.hide() never worked for me. It doesn’t hide the status bar.

@Calendee when the app starts it shows header bar correctly and immediately it adds padding.

Even though ionic.Platform.fullScreen() worked. It’s not a perfect solution as initially it shows the header bar with padding and then remove it.


Any chance you can privately share your project with the Ionic team? I’ve got several Ionic apps in progress and have not seen this. It’s definitely worth having another set of eyes evaluate it.


Just found out that it happen when the app is run through AppGyver. It runs fine if I run it using ionic cli command ‘ionic run iOS’. Now I need to go through AppGyver configuration and see what is causing it.


I’m not using AppGyver and I can see the header bar not shrinking when using ionic.Platform.fullScreen() (the header bar info hides but the height of the nav-bar doesn’t shrink).

You can see it fail on any iOS device or in the emulator by adding ionic.Platform.fullScreen() to the default created project. (ionic start new_project for example)