Gap between ons-toolbar and statusbar iOS
Tom last edited by Tom
For some reason I suddenly observe a gap between the toolbar and the iOS statusbar (iPhone 6s, iOS 11), see the attached example.
To troubleshoot this issue and to be sure it was not part of my own code that caused this I took the code of the very simple example of the toolbar reference at https://onsen.io/v2/api/js/ons-toolbar.html to see what happened (no own css file used) and the same behaviour is observed.
I am using Cordova to build the App and used the basis settings for the config.xml which are part of the standard Cordova app template. I am applying version 2.8.2 of Onsen, also tried the CDN version.
To confirm it’s not Cordova, I also used a kitchensick from Framework7 and no gap was observed with the same Cordova setup, so something is on going with the Onsen setup.
Anyhow an idea what is going on?
jamal last edited by
i found some info that may solve your issue based on a recent blog post by the the OnsenUi team. Hopefully, the OnsenUI team jumps in and comments about this issue as I don’t know if it is caused by recently added iPhoneX notch patch.
Add the following to your index.html head section:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
Notice: viewport-fit=cover" is added.
Hi, @Tom !
Onsen UI automatically adds 20px gap on top of the screen if the app runs on Cordova.
But your app seems to already have a 20px white status bar for some reason, so you have to disable the feature (auto status bar fill) of Onsen UI. You just need to execute
ons.disableAutoStatusBarfill()in the beginning of your app.
Thank you for the information.
viewport-fit=covertakes effect only on iPhone X, I do not think it is related to this issue.
(Dec 22, 2017: Sorry, it seems that UIWebView automatically adds 20 px gap since iOS 11. You should add
viewport-fit=covereven if the app is running on iOS devices other than iPhone X)