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:

    0_1459323584247_upload-4ba2b392-93e8-41e3-875d-cd79c4509957

    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.

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


  • 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