2

MyApp

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");
}
Idan Adar
  • 44,156
  • 13
  • 50
  • 89
Axel92Dev
  • 197
  • 1
  • 15
  • I don't think I like the `device.version > "6.0"`, maybe look at this thread: http://stackoverflow.com/questions/6832596/how-to-compare-software-version-number-using-js-only-number – Nathan H Sep 01 '13 at 06:31

3 Answers3

2

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.

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

Idan Adar
  • 44,156
  • 13
  • 50
  • 89
  • Thank you Idan. Can you see my original post edited? Is it correct to put that snippet of code in that js inside the iphone folder? – Axel92Dev Aug 30 '13 at 13:31
  • I would put it in common\yourapp.js >> wlCommonInit, and w/out the event listener. – Idan Adar Aug 30 '13 at 13:54
  • I increased the height of my header of 20px, but what i figured out is that the white space is still there and the higher header will steal space to content. I tried to increment the body without success. May header and footer are jquerymobile-fixed. – Axel92Dev Aug 30 '13 at 15:22
  • See my edited answer with links to questions regarding spacing at the footer in apps using jQuery Mobile. – Idan Adar Aug 30 '13 at 15:48
  • If those questions didn't help please create a minimized test case exhibiting the spacing and provide either source code or zip file containing the Worklight project. – Idan Adar Aug 31 '13 at 06:38
  • Hi Idan, sorry for the late. Here's a link to a simple application with a red background that in ios7 show a white space at the bottom. https://dl.dropboxusercontent.com/u/4195013/prova-1.0-iphone.zip – Axel92Dev Sep 03 '13 at 13:49
  • Did you first try to resolve the issue by looking at the jQuery-specific questions? Once I install Xcode 5 I'll be able to test this. – Idan Adar Sep 03 '13 at 13:51
  • Hi Idan, have you had time to try this on Xcode5? because I cannot find any solution about this on the jquery section! :( – Axel92Dev Sep 11 '13 at 07:38
  • I have not, but I do not believe this has got anything to do with Xcode, but with your CSS. – Idan Adar Sep 11 '13 at 07:50
  • I am referring of course to jQuery Mobile's supplied CSS rather than Worklight. Maybe there are articles about it in jQuery's website? – Idan Adar Sep 11 '13 at 08:33
  • @user1758494, I stand corrected - the white spacing issue is a bug in Worklight; we're on it. – Idan Adar Sep 15 '13 at 15:39
2

Worklight 6.0.0.1 was just released over the weekend; it addresses the status bar issue depicted in your screen shot.
The fix for 5.0.6.1 is not publically available (it is for customers who use this version and require it).

Update:
The white spacing at the bottom was a Worklight bug and is fixed in the latest 6.0.0.1 iFix as well as available for Worklight 6.0.0.x and Worklight 5.0.x for customers from IBM Fix Centeral.

Idan Adar
  • 44,156
  • 13
  • 50
  • 89
  • Idan, thank for your response. Just to be more clear, you said that my company whose is using WL 5.0.6.1 can request the fix for this issue? – Axel92Dev Sep 20 '13 at 13:03
  • If you are a customer, then it should be available to you via Passport Advantage; if you are a Business Partner, then it should be available to you via PartnerWorld. The white spacing issue at the bottom is still an open issue AFAIK, but you could check for a fix for it in the relevant website for you. – Idan Adar Sep 20 '13 at 13:11
  • Thank you again Idan, can you confirm that this fixpack: http://tinypic.com/view.php?pic=hx6bfs&s=5#.UjxlfYbCXmY correct the white space problem? – Axel92Dev Sep 20 '13 at 15:11
  • I'm sorry, I cannot verify this at this time (not at work...), but hey, go ahead and try. :) – Idan Adar Sep 20 '13 at 15:34
  • Yes, that fix was included in the latest WL 5.0.6.1 interim fix for iOS7 described in this technote: http://www-01.ibm.com/support/docview.wss?uid=swg27039574 – Barbara Sep 23 '13 at 20:11
0

Worklight was updated since you posted your question.

Download the latest version of fixpacks, and make sure to read the tech note entirely: http://www-01.ibm.com/support/docview.wss?uid=swg27039574

Nathan H
  • 48,033
  • 60
  • 165
  • 247