3. Gap between ons-toolbar and statusbar iOS

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.

Gap between ons-toolbar and statusbar iOS

  • T

    0_1511636460346_Image.png

    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?

    Greetings,
    Tom

    0 1 Reply

  • @Tom,

    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.

    https://medium.com/the-web-tub/supporting-iphone-x-for-mobile-web-cordova-app-using-onsen-ui-f17a4c272fcd

    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.

    HTH,
    Jamal

    0
  • Onsen UI

    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.
    https://onsen.io/v2/api/js/ons.html#method-disableAutoStatusBarFill

    @jamal
    Thank you for the information.
    Since viewport-fit=cover takes 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=cover even if the app is running on iOS devices other than iPhone X)

    0