jquery-mobileibm-mobilefirstworklight-runtime

iPhone/iPad Status bar overlapping on app's header


I am using worklight 6.2 Consumer Edition on WAS Liberty Profile 8.5.5.1 Server. I am using jQuery Mobile 1.4.2 to develop UI. When I install app on iPhone/iPad, status bar of phone is hiding some part of my app's header.

How can I fix this issue (if its an issue)?


Solution

  • This works fine in a default new app with jQuery Mobile that was generated by Worklight Studio. As you can see, the status does not overlap the text.

    You can also take a look at the Worklight Starter with jQuery Mobile edition, that also works on iOS w/out the status bar covering the top of app. Compare your CSS.

    You need to provide a screen shot of what you're seeing, as well as provide a sample application where you are experiencing it. This issue originates from your code. Provide code.

    One possible solution would be to add some margin-top to whichever element is at the top of your applicaiton's HTML.