PhoneGap / Apache Cordova - top margin for iOS 7

ios7.phonegap.cordova.js

// Pre-requisites:
// 1. Device core plugin
// 2. Splashscreen core plugin (3.1.0)
// 3. config.xml:  <preference name="AutoHideSplashScreen" value="false" />
// 4. config.xml:  <preference name="DisallowOverscroll" value="true" />

function onDeviceReady() {
    if (parseFloat(window.device.version) >= 7.0) {
          document.body.style.marginTop = "20px";
          // OR do whatever layout you need here, to expand a navigation bar etc
    }
    navigator.splashscreen.hide();
}


document.addEventListener('deviceready', onDeviceReady, false);

Yeah this needs PhoneGap/Cordova 3.0.0 or greater. The only 3.1.0 thing is the splashscreen plugin, so it doesn't jump around due to the status bar in 7.0

Technically it should work in 2.9.0, I don't see why not (save the splashscreen plugin, which you may have to patch)

Here's the command for adding the "Basic device information" plugin
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git

Updated the gist (thanks to the commenters on http://coenraets.org/blog/2013/09/phonegap-and-cordova-with-ios-7/) to detect >= 7.0.

Something to consider - on rotation, the status bar height changes.

looks like there is class x-ios-7 which gets set on body by cordova. can key of this class to make all needed adjustments via CSS.

@leapingbytes I don't think cordova is setting that class. Any chance you're using sencha touch?

Using a margin on the body doesn't alter the placement of absolutely-positioned elements within the document. I prefer to use translate3d, as that shifts the entire document while preserving the layout of all its children. Also, calling this on deviceready() can make the shift visible to the user. Doing the following directly in the document head should apply the transform before any rendering happens:

if(navigator.userAgent.match(/iPhone OS 7/)) {
  document.write('<style type="text/css">body{-webkit-transform: translate3d(0,20px,0)}</style>');
}

Hi.
using version GP 2.3
document.body.style.marginTop = "20px"; works.

But the webview shifts up to 0 after invoking camera , therefore part of the screen is obscured by the status bar again.
any suggestion?

thanks

thanks @mullican - even better

@JasperCCS - unfortunately a lot of the core plugins need to take this into account, and hide the statusbar, and unhide it (if it was not hidden before) after.

@mullican - I modified the RE as follows so both iPhone and iPad will work...

      if(navigator.userAgent.match(/iP[ha][od].*OS 7/)) {
        document.write('<style type="text/css">body{-webkit-transform: translate3d(0,20px,0)}</style>');
      }

But this concept isn't working for me because now my header and footer get stuck on the page and scroll with it. #BTTDB

Thanks for the ideas guys! Here is the solution I used and it's working on any kind of iOS 7 device:

var iOS7 = window.device 
                && window.device.platform 
                && window.device.platform.toLowerCase() == "ios"
                && parseFloat(window.device.version) >= 7.0;

if (iOS7) {
    // do the trick here
    // ### I used padding-top: 20px on the body element ###
}

@mullican - Thank you. Your method worked well with jQuery Mobile based UI.

@johnnylambada Thanks for that, I havent upgraded to 3.x and your solutions works like a charm for 2.x

thanks @mullican @johnnylambada

If you never created the phonegap project using phonegap CLI then it is a real pain to install the plugins (Step 1 & 2) using it. Try using plugman instead. The command which worked for me to install the device core plugin was

plugman install --platform ios --project "/Users/Vishal/Documents/Dev/Celebrations/app/ios" --plugin https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git

The project directory is the location of your xcode project which contains phonegap config.xml

And to install the splashscreen plugin try

plugman install --platform ios --project "/Users/VishalRJoshi/Documents/Dev/Celebrations/app/ios" --plugin https://git-wip-us.apache.org/repos/asf/cordova-plugin-splashscreen.git

And since I was using Angular.js for my app the code which worked for me inside deviceready listener of cordova was as below:

if(navigator.userAgent.match(/iPhone OS 7/)) {
document.body.style.marginTop = "20px";
}

Hope this helps!!

thanks, simple & easy.

I would say just add a class on your body tag with JS if it is iOS7.

This will allow you to select with the iOS class in your CSS files and apply styles that are specific to iOS7. This way your styles are not buried in some JS file.

Makes it easier to find.

Tying it all together, taking a stab at @jlongnbt 's suggestion, using Cordova merges:

• Install the "Device" plugin:

cordova plugin add org.apache.cordova.device

• Create a file merges/ios/css/platform.css with the contents:

body.iOS7 {
    -webkit-transform: translate3d(0, 20px, 0);
}

• Create a file merges/ios/js/platform.js with the contents:

$(document).on('deviceready', function () {
    if (window.device && parseFloat(window.device.version) >= 7.0) {
        $('body').addClass('iOS7');
    }
});

• Add references to platform.css and platform.js to www/index.html:

    <head>
        <!-- ... -->
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <link rel="stylesheet" type="text/css" href="css/platform.css"/>
        <!-- ... -->
    </head>
    <body>
        <!-- ... -->
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript" src="js/platform.js"></script>
        <!-- ... -->
    </body>

• Ship it!

Hi, it is possible to call the "core device plugin" in a Phonegap Build app ? Like this maybe :
gap:plugin name="org.apache.cordova.Device"
?

Thanks

@louisdoe Yes, I'm using phonegap build to create my .apk and .ipa files with <gap:plugin name="org.apache.cordova.device" /> in my config.xml file. Without problems.

I am injecting the style by adding this to the script in the head:
if(navigator.userAgent.match(/iP[ha][od].*OS 7/)) {
document.write('<style type="text/css">body{-webkit-transform: translate3d(0,20px,0)}</style>');
}
Problem is, the status bar then has a white background on ios7+, pre iOS7 it shows black background statusbar with light content. I want it to have a blue background on any iOS version.

I tried changing the XIB to blue background, but that won't work since it seams to move the entire view down 20px.

Thoughts? TIA

(It's using UIStatusBarStyleDefault)

Good discussion here
http://blogs.telerik.com/appbuilder/posts/13-11-07/everything-hybrid-web-apps-need-to-know-about-the-status-bar-in-ios7
but I couldn't get the referenced plugin to work

The webkit-transform knackers JQuery Mobile for me, as its footers are now off the bottom of the page. The best overall I've found for JQM is

    document.body.style.marginTop = "20px";
    $(".ui-header").css("margin-top", "20px");

@dmcg Yes, using JQuery Mobile too, and the webkit-transform whites out the whole page, but your solution works great for me.

body . padding -20px

by identy