ibm mobilefirst - IBM Worklight 5.0.6.1 - Bottom white space in iOS 7

Question

As you can see, at the bottom of my page remains a white space. Its height is the same of the old status bar that was present in ios6. Do i have to modify css? Because I never fixed an height for my app, worklight has always chosen the right size.

EDIT: you have to save the image and open in a desktop with different color to see the white space at the bottom.

*
 *  Licensed Materials - Property of IBM
 *  5725-G92 (C) Copyright IBM Corp. 2011, 2013. All Rights Reserved.
 *  US Government Users Restricted Rights - Use, duplication or
 *  disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 */

// This method is invoked after loading the main HTML and successful initialization of the Worklight runtime.
function wlEnvInit(){
    wlCommonInit();
    // Environment initialization code goes here
}

//Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);

// Cordova is ready
//
function onDeviceReady() {
    alert(device.version);
    if(device.version > "6.0")
        $(".elmecHeader").css("height", "70px");
}

Answer 1

Yes, you will need to adjust your application for iOS 7.

You can use Cordova Device API to detect the OS that the app is running on and use different CSS for the different OS layout in iOS 6 and 7 (if you wish so).

I suggest to add more of the green background at the top, so that the new status bar in iOS 7 will not overlap with your app design.

This is a problem all web-based apps will suffer from in iOS until a proper solution is devised.

Be sure to also read the Apple-provided iOS 7 Transition Guide.

The above is one suggested approach; you should probably read more material about iOS 7 design and about how the status bar behaves in iOS 7 and choose the right path for your app.

• http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/
• http://www.slideshare.net/evgenybelyaev16/transition-guide

---

As for the bottom spacing, this is a bug in Worklight.