Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
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?
-
@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.
-
@honglio Which version of Onsen UI are you using?
-
@Fran-Diox js and css are both v2.0.0-beta.7
-
@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.
-
@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.
-