0

For iOS7 view overlaps status bar issue I have seen work-arounds in this forum, however, when we develop our Hybrid app using IBM MobileFirst platform, we cannot use those work-arounds. We don't like introduce any OS specific code. Is any suggested solution from MobileFirst? We could detect the iOS version in index html file and add 20px to the margin of the document body. Is there any better solution?

Jennifer Hu
  • 1
  • 1

2 Answers2

0

Normally you should not do anything. The MFP framework detects the iOS version and auto-applies CSS so that the status bar (which is Not part of the application, rather it is outside of the application) will not overlap the content at the very top.

This sometimes gets reintroduced typically when using 3rd party frameworks such as jQuery Mobile.

The solution is indeed to apply environment-specific CSS (which, BTW, in MFP is a perfectly Valid thing to do, in the your-app\iphone\css folder, in combination with JavaScript for platform detection).

There is one more solution - which is to change the app so that even if using iOS 7 and above, the status bar will behave like in prior versions of iOS. That is, be outside of the application rather than part of it.

To do that, you need to open common\js\initOptions.js and add showIOS7StatusBar, set to false.

You can read more about status bar support in the following IBM tech note: http://www-01.ibm.com/support/docview.wss?uid=swg27039574

Idan Adar
  • 44,156
  • 13
  • 50
  • 89
0

This css approach didn't seem to fully work for me. The initial rendering of the app would work fine, but if the keyboard popped up, the scrollable view would then overwrite the notification bar. The showIOS7StatusBar in initOptions.js also didn't seem to put the notification bar outside of my MobileFirst 6.3 app. However, this approach (writing iOS native code to explicitly limit the WebView) did work for me...

iOS 7 Status bar with Phonegap

Community
  • 1
  • 1
scott dickerson
  • 908
  • 1
  • 5
  • 13
  • /*Optional iOS 7 status bar filler*/ #wl_ios7bar{ background-color: white; height: 15pt; position: fixed; top: 0; width:100%; } body.wl_ios7{ padding-top: 15pt; } .mblScrollableView { margin-top: 0px !important; padding-top: 0px !important; top: 20px !important; } .mblScrollableViewContainer { padding-top: 0px !important; } – scott dickerson Oct 30 '15 at 22:05