Issue:
Taller header when running on iOS using the AppBuilder companion app or app package (.ipa file)
 
Description:

When an app is run on iOS, the header of some screens may be 20px taller after a second screen is shown.
This issue happens because starting with iOS 7, apps are running full screen and the status bar overlays the application.
Code in the application (on a pagebeforeshow event) calls a correctPage() function to 20px as padding to the top of the header if the status bar is visible. However, if the status bar is not overlaying with the application, then the you would see the status bar and the tall header.

 
Solution:

  • Add the Device and StatusBar plugins to the project. (Properties/Plugins/Core Plugins)
  • On a deviceready handler, call StatusBar.hide() to hide the status bar. This approach works fine with the AppBuilder companion app and for .ipa files (this behavior is similar to the .ipa build from the Mobile App Builder).

Alternatively, you can use StatusBar.overlaysWebView(true) to handle the status bar as an overlay and the header will use the status bar area.


Notes:

  • Code can be added to a device events section in the .js file for the app (for example MyPhoneApp.js).
  • When using StatusBar.overlaysWebView(true), you may notice that the height of the header on the first screen is not adjusted.

Example:

// device events
MyPhoneApp_deviceEvents = function() {

    document.addEventListener("deviceready", function() {

        // StatusBar.overlaysWebView(true);
        StatusBar.hide();
    });
}

Related links: