Space for statusbar in v5?

With statusbar component removed in v5, how do we leave space for it?

Here is the app template:

  <f7-app :params="f7params">
    <!-- REMOVED IN V5 <f7-statusbar></f7-statusbar> -->
    <f7-view main url="/"  />
export default {
  data () {
    return {
      f7params: {
        view: {
          pushState: false
        name: 'Fc',
        id: '',
        statusbar: {
          iosOverlaysWebview: true,
          androidOverlaysWebView: true

The cordova.xml does have cordova status bar cordova-plugin-statusbar:

    <plugin name="cordova-plugin-statusbar" spec="^2.4.3" />
    <preference name="StatusBarStyle" value="default" />

The page in the screenshot looks like this:

        <f7-link icon="icon-back" @click="onBack"><span>Back</span></f7-link>
      <f7-nav-title>Choose Sign In Method</f7-nav-title>
    <div class="full-center button-container">
      <f7-button outline large raised
        <font-awesome-icon icon="user-cog" />
        I am an Administrator
      <f7-button outline large raised
        <font-awesome-icon icon="user-clock" />
        I am a Worker

In v4, the same page looked like this:

Using Safari Inspector in the new v5, in order to make it look the same as v4, the style needs to be:

.navbar-bg {
   height: 54 px; // computed height is 44px without this style
.navbar-inner {
   height: 54px;
   top: 10px

But that doesn’t seem to be what the F7 developer had in mind when removing statusbar in v4. Can you please tell me what is the proper way to insert space for the statusbar?


No custom styles should be added! Did you create app with F7-CLI? The required size should be automatically added to navbar size

No, I’ve being using F7 since v3. I just updated the version in package.json. You’re saying I need to run the CLI every time I update a version? Is there a manual way to do it?

No neccessary, but something can be missing. Do you have viewport-fit=cover in your meta tags in index.html?


<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="Content-Security-Policy" content="">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>My App</title>
    <div id="app"></div>
    <!-- built files will be auto injected -->

And main.js has:

import Vue from 'vue'
import Framework7 from 'framework7/framework7.esm.bundle.js'
import Framework7Vue from 'framework7-vue/framework7-vue.esm.bundle.js'
import App from './App'
new Vue({
  el: '#app',
  render: (h) => h(App)

And App.vue has in addition to the <template> and <script> above:

<style lang="scss">
@import "~framework7/css/framework7.bundle.min.css";

And of course you have WKWebView installed too?

No I’m using UIWebView (Cordova). Why, is there a bug with UIWebView? v4 was working fine.

UIWebView is deprecated a while ago and yes, it doesn’t support such safe areas

I was planning to update to WkWebView in a release later this year. Are you saying definitively that while v4 worked fine in UIWebView, that it won’t work in v5?

In v5 it won’t work, then you can add custom style hacks you mentioned above. But UIWebView is also deprecated officially by Apple and your app can be easily rejected from AppStore

Ok, so I switched to WkWebView, which was really easy. I thought it would be harder, because I heard about all sorts of cordova issues it had. But cordova-plugin-wkwebview-file-xhr seems to be smooth so far.

However, it does not resolve the status bar issue:

Try to create new clean app with CLI and compare. Also, any reason you test in old iOS 11 simulator?

Ah, you’re right. iOS 11 doesn’t display correctly. iOS 12 and 13 do display correctly. Is that a known issue? Is it resolvable?

You commented on v5 release announcement that iOS 11 is supported:

Check on real device

An iPhone 6S should ideally be running iOS 13 in the best-case. I doubt you’d find very many 6S models running iOS11.

10% of my customers are running iOS 11.

Did you add this CSS:

.device-cordova.device-ios {
  height: 100vh;

That does not affect the statusbar spacing on iOS 11.

Have you set StatusBarOverlaysWebView in config.xml?

Yes. It works fine in iOS 12+.