IBM Worklight 6.1 - iOS 7 status bar overlays elements in HTML

Question

I am building an app using IBM Worklight 6.1 for iOS 7. In iOS 7 the status bar is overlay my Webview and i followed the below link and fix for the same issue.

But, it changes the style as iOS 6 and provided a scroll in my webview for that 20 pixel, so my page can be scroll up and hide the header for 20 pixel.

Please let me know if someone has a solution...

Screenshot 1:

Screenshot 2:

Answer 1

From the screenshots, it looks like the HelloWorklight project is being used.

In the context of this application, you can add the following to the #header in common\css\main.css:

position: fixed;
width: 100%;

This way, when swiping Up the status bar will not cover the header...
You can take a similar approach in your own app.

Fixed positioning in CSS.

---

Note that in iphone\css\main.css you can alter the styling of the default white status bar that is "injected" by the Worklight framework.