Navigation bar overlay on iOS 7+

  • 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?

  • Onsen UI

    @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.

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

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

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

  • Onsen UI

    @honglio Which version of Onsen UI are you using?

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

  • Onsen UI

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

  • 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.

  • Onsen UI

    @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.

  • @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.

  • @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.

  • @IliaSky said:

    window.cordova = true

    Works in v2.0.0.beta-7

Log in to reply