Navigation bar overlay on iOS 7+

[honglio]

iOS 7+ allows you to have make full screen apps. But there could be such problem when navigation bar overlap your app:

Is there any feature in OnsenUI helps to solve this issue?

[Fran Diox]

@honglio Are you reporting a bug in Onsen UI or just want to make sure this doesn’t happen?

The iOS status bar should be handled by Onsen UI automatically, you don’t need to do anything.

[honglio]

@Fran-Diox My intent is to report a bug. I use ons-toobar as the status bar.

<ons-toolbar>
    <div class="left"><ons-back-button></ons-back-button></div>
    <div class="center">Something</div>
</ons-toolbar>

It displays like the “Not Good” image on iOS 7+ devices.

[Fran Diox]

@honglio Which version of Onsen UI are you using?

[honglio]

@Fran-Diox js and css are both v2.0.0-beta.7

[Fran Diox]

@honglio The status bar filled has been modified in beta.8. Could you please try it?

[honglio]

I test in beta-9 . The status bar filled doesn’t work. I haven’t test beta-8 yet. Could you tell me where to download beta-8. @Fran-Diox please help! Does it not work because I don’t have Cordova included.

[Fran Diox]

@honglio Just to update you, we managed to reproduce the status bar problem in a sample app. We are sort of busy with other stuff but we will fix it soon.

[honglio]

@Fran-Diox Thanks for let me know this. Currently, we give body element a margin-top 20px. So the status bar doesn’t overlap with the navigation bar. But the color of them are different. This make it looks a little different from native app.

[IliaSky]

@honglio - Yes, the problem does come from the lack of cordova. Currently we’re checking for either cordova or phonegap in order to differentiate between a user opening a website with Onsen UI and an actual app.

For now to be honest the easiest way to trick your app into working is just doing window.cordova = true before running Onsen UI.

[honglio]

@IliaSky said:

window.cordova = true

Works in v2.0.0.beta-7