Tabbar / Toolbar not appearing correctly on iPhone X

Hi,

I have been working on a project and the Tabbar at the bottom of the screen had been displaying as expected when running on iPhone X simulator. Now it is not, not sure what I changed to make this behaviour happen but any insight/help would be greatly appreciated.

Now:

I have even tried adding CSS to the tabbar using the env() constants, and this doesn’t work either.

I’m new to framework7 and no doubt I am missing something silly!

Many Thanks,

Liam

EDIT: Here is my index.html markup;

  <body class="color-theme-green theme-dark">
    <div id="app">
        <!-- Status bar overlay for fullscreen mode-->
        <div class="statusbar"></div>


        <!-- Views/Tabs container -->
        <div class="views tabs ios-edges">
            <!-- Tabbar for switching views-tabs -->
            <div class="toolbar tabbar-labels toolbar-bottom-md">
                <div class="toolbar-inner">
                    <a href="#view-home" class="tab-link tab-link-active">
                        <i class="icon f7-icons ios-only">home</i>
                        <i class="icon f7-icons ios-only icon-ios-fill">home_fill</i>
                        <i class="icon material-icons md-only">home</i>
                        <span class="tabbar-label">Account</span>
                    </a>
                    <a href="#view-map" class="tab-link">
                        <i class="icon f7-icons ios-only">world</i>
                        <i class="icon f7-icons ios-only icon-ios-fill">world_fill</i>
                        <i class="icon material-icons md-only">location_on</i>
                        <span class="tabbar-label">Map</span>
                    </a>
                    <a href="#view-contact" class="tab-link">
                        <i class="icon f7-icons ios-only">email</i>
                        <i class="icon f7-icons ios-only icon-ios-fill">email_fill</i>
                        <i class="icon material-icons md-only">email</i>
                        <span class="tabbar-label">Contact</span>
                    </a>
                </div>
            </div>
            <!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->
            <div id="view-home" class="view view-main tab tab-active">
                <!-- Page, data-name contains page name which can be used in page callbacks -->
                <div class="page" data-name="home">
                    <!-- Top Navbar -->
                    <div class="navbar">
                        <div class="navbar-inner">
                            <div class="title sliding">My Account</div>
                        </div>
                    </div>

                    <!-- Scrollable page content-->
                    <div class="page-content">
                        <div class="block">
                            <h2 class="business_name text-color-green" style="text-align: center;">Business Name</h2>
                            <p class="email text-color-blue" style="text-align: center;">[email protected]</p>
                        </div>

                        <div class="block-title">Contact Information</div>
                        <div class="list inline-labels no-hairlines-md">
                            <ul>
                                <li class="item-content item-input">
                                    <div class="item-inner">
                                        <div class="item-title item-label">First Name</div>
                                        <div class="item-input-wrap">
                                            <input type="text" placeholder="First Name" name="first_name">
                                            <span class="input-clear-button"></span>
                                        </div>
                                    </div>
                                </li>
                                <li class="item-content item-input">
                                    <div class="item-inner">
                                        <div class="item-title item-label">Last Name</div>
                                        <div class="item-input-wrap">
                                            <input type="text" placeholder="Last Name" name="last_name">
                                            <span class="input-clear-button"></span>
                                        </div>
                                    </div>
                                </li>
                                <li class="item-content item-input">
                                    <div class="item-inner">
                                        <div class="item-title item-label">Address 1</div>
                                        <div class="item-input-wrap">
                                            <input type="text" placeholder="Address Line 1" name="address1">
                                            <span class="input-clear-button"></span>
                                        </div>
                                    </div>
                                </li>
                                <li class="item-content item-input">
                                    <div class="item-inner">
                                        <div class="item-title item-label">Address 2</div>
                                        <div class="item-input-wrap">
                                            <input type="text" placeholder="Address Line 2" name="address2">
                                            <span class="input-clear-button"></span>
                                        </div>
                                    </div>
                                </li>
                                <li class="item-content item-input">
                                    <div class="item-inner">
                                        <div class="item-title item-label">City</div>
                                        <div class="item-input-wrap">
                                            <input type="text" placeholder="City" name="city">
                                            <span class="input-clear-button"></span>
                                        </div>
                                    </div>
                                </li>
                                <li class="item-content item-input">
                                    <div class="item-inner">
                                        <div class="item-title item-label">County</div>
                                        <div class="item-input-wrap">
                                            <input type="text" placeholder="County" name="county">
                                            <span class="input-clear-button"></span>
                                        </div>
                                    </div>
                                </li>
                                <li class="item-content item-input">
                                    <div class="item-inner">
                                        <div class="item-title item-label">Postcode</div>
                                        <div class="item-input-wrap">
                                            <input type="text" placeholder="Postcode" name="postcode">
                                            <span class="input-clear-button"></span>
                                        </div>
                                    </div>
                                </li>
                                <li class="item-content item-input">
                                    <div class="item-inner">
                                        <div class="item-title item-label">Phone 1</div>
                                        <div class="item-input-wrap">
                                            <input type="text" placeholder="Phone 1" name="phone1">
                                            <span class="input-clear-button"></span>
                                        </div>
                                    </div>
                                </li>
                                <li class="item-content item-input">
                                    <div class="item-inner">
                                        <div class="item-title item-label">Phone 2</div>
                                        <div class="item-input-wrap">
                                            <input type="text" placeholder="Phone 2" name="phone2">
                                            <span class="input-clear-button"></span>
                                        </div>
                                    </div>
                                </li>
                                <li class="item-content item-input">
                                    <div class="item-inner">
                                        <div class="item-title item-label">Website</div>
                                        <div class="item-input-wrap">
                                            <input type="url" placeholder="Website" name="website">
                                            <span class="input-clear-button"></span>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <div class="block block-strong no-margin no-hairline">
                                <button class=" button button-outline account-update-button">Update Changes</button>
                            </div>
                        </div>



                        <div class="block-title">Keywords</div>
                        <div class="block block-strong">
                            <div id="keyword-chips" style="text-align: center;">
                                <div class="chip chip-outline">
                                    <div class="chip-label">example</div>
                                </div>
                                <div class="chip chip-outline">
                                    <div class="chip-label">business</div>
                                </div>
                                <div class="chip chip-outline">
                                    <div class="chip-label">keywords</div>
                                </div>
                                <div class="chip chip-outline">
                                    <div class="chip-label">more</div>
                                </div>
                                <div class="chip chip-outline">
                                    <div class="chip-label">chips</div>
                                </div>
                            </div>
                        </div>

                        <div class="block-title">Service Area</div>
                        <div class="block block-strong">
                            <div id="service-area" style="text-align: center;">
                                <p>You are being found for keywords in a 50 mile radius</p>
                            </div>
                            <button class="button button-outline service-area-update-button">Update Service Area</button>
                        </div>

                    </div>
                </div>
            </div>

            <div id="view-map" class="view tab">
                <!-- Catalog page will be loaded here dynamically from /catalog/ route -->
            </div>

            <div id="view-contact" class="view tab">
                <!-- Settings page will be loaded here dynamically from /settings/ route -->
            </div>
        </div>

        <!-- Popup -->
        <div class="popup" id="my-popup">
            <div class="view">
                <div class="page">
                    <div class="navbar">
                        <div class="navbar-inner">
                            <div class="title">Popup</div>
                            <div class="right">
                                <a href="#" class="link popup-close">Close</a>
                            </div>
                        </div>
                    </div>
                    <div class="page-content">
                        <div class="block">
                            <p>Popup content goes here.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Login Screen -->
        <div class="login-screen" id="my-login-screen">
            <div class="view">
                <div class="page">
                    <div class="page-content login-screen-content">
                        <div class="login-screen-title">Login</div>
                        <div class="list">
                            <ul>
                                <li class="item-content item-input">
                                    <div class="item-inner">
                                        <div class="item-title item-label">Username</div>
                                        <div class="item-input-wrap">
                                            <input type="text" name="username" id="login-username" placeholder="Your username">
                                        </div>
                                    </div>
                                </li>
                                <li class="item-content item-input">
                                    <div class="item-inner">
                                        <div class="item-title item-label">Password</div>
                                        <div class="item-input-wrap">
                                            <input type="password" name="password" id="login-password" placeholder="Your password">
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="list">
                            <ul>
                                <li>
                                    <a href="#" class="item-link list-button login-button">Sign In</a>
                                </li>
                            </ul>
                            <div class="block-footer">Some text about login information.<br>Click "Sign In" to close Login Screen</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="cordova.js"></script>
    <script src="framework7/js/framework7.min.js"></script>
    <!-- App routes -->
    <script src="js/routes.js"></script>
    <!-- Your custom app scripts -->
    <script src="js/app.js"></script>
</body>

@nolimits4web Do you have any ideas on this one? I’m stumped

If it is a Cordova app, then try to use WKWebView plugin, the default UIWebView used in cordova may have issues with safe-area env variables

Thanks for your reply! Is Framework7 meant to take care of the iPhone X notch / home button layout automatically? I’m confused as it did work originally, but then stopped working and went below the home ‘button’ at the bottom of the screen! Will give the WKWebView Plugin a try now and let you know how I get on.

1 Like