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.

Iphone X Platform Support - Excessive upper margin

  • Goodmorning everyone,
    I want to bring to your attention a strange behavior that is occurring in my development process, it’s driving me crazy.

    Development environment:

    Cordova Installed platforms:
    android 7.1.1
    ios 4.5.5
    Cordova Available platforms:
    browser ~5.0.1
    osx ~4.0.1
    windows ~5.0.0
    www ^3.12.0

    Cordova requirements checked:
    Java JDK: installed 1.8.0
    Android SDK: installed true
    Android target: installed android-27
    Gradle: installed /usr/local/Cellar/gradle/4.9/bin/gradle

    Requirements check results for ios:
    Apple macOS: installed darwin
    Xcode: installed [object Object]
    ios-deploy: installed [object Object]
    CocoaPods: installed [object Object]

    iOS platform:
    Xcode 9.4.1
    Build version 9F2000

    Cordova version: 8.0.0
    Onsen UI: 2.14.4


    <!DOCTYPE html>
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" href="vendor/onsenui/css/onsenui.min.css">
        <link rel="stylesheet" href="vendor/onsenui/css/onsen-css-components.min.css">
        <link rel="stylesheet" href="vendor/swiper/css/swiper.min.css">
        <link rel="stylesheet" href="css/index.css">
        <script type="text/javascript"  src="vendor/onsenui/js/onsenui.min.js"></script>
        <script type="text/javascript"  src="vendor/swiper/js/swiper.min.js" defer async></script>
        <script type="text/javascript" src="js/index.js" defer async></script>
        <style type="text/css">
    <ons-page id="helloworld-page">
        <div class="left">
          <ons-toolbar-button icon="md-face"></ons-toolbar-button>
        <div class="center">Title</div>
        <div class="right">
      <p style="text-align: center">Some content.</p>
        <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript">
    if (ons.platform.isIPhoneX()) { // Utility function
      // Add empty attribute to the <html> element
      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');

    0_1534504608232_Simulator Screen Shot - iPhone X - 2018-08-17 at 12.48.28.png
    Highlighted in yellow you can see the added area that really should not be there, since the JS code has been added to detect the presence of the iPhone X and correct the area.

    0_1534505617866_Schermata 2018-08-17 alle 12.49.01.png

    Any ideas on how to correct this behavior?

    Thanks in advance.

  • Solution founded here:;

    Added following code in index.html:

    <meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">

  • nice