In my application, the top of the HTML is half way into status bar. I have a button in that section that is now impossible to click.
I don't know why it would do this. I have the standard viewport line ("width=device-width").
Any ideas? Or how to adjust it?
Apart from the steps given by Idan above, you can try using one preference in iOS which hides the statusbar.
Try adding the following method to your app's root view controller:
- (BOOL)prefersStatusBarHidden { return YES; }
Or you can add 20px space on the top after determining the iOS version
function onDeviceReady() {
if (parseFloat(window.device.version) === 7.0) { document.body.style.marginTop = "20px"; }}
document.addEventListener('deviceready', onDeviceReady, false);
Make sure you are following the guidelines provided by IBM in regards to iOS 7 support, as well as using the latest version of Worklight containing this support.
You can read more about it, here:
I also see that you mention using jQuery Mobile...
Perhaps, then, you should take a look at the Worklight Starter jQuery Mobile edition that looks OK in 7.x; take a look at the CSS.
W/out a demo app from you to understand how exactly you've styled your app, a fuller answer cannot be given.
A comment by you:
Setting the "marginTop" worked PERFECTLY for the opening screen (looks awesome)...but as soon as I switch pages (.changePage()) it is back to overlapping. What am I doing wrong?
My guess is that the other page you are loading likely loads a different div and if that div does not receive the same styling as the original div, the problem will re-appear.
