V5 and statusbar overlapping navbar

Questions
1

Hi! I’m trying to start new Cordova project from the scratch (there’s a reason I don’t use Framework7-CLI) and faced a problem with statusbar. There is statusbar component in v4 which add padding on the top of the app, but in v5 there’s no such component, so statusbar overlapping navbar (in md theme). I didn’t find anything in docs what explains how to fix that. Need help with fixing that, please. :slight_smile:

config.xml
preference name=“StatusBarOverlaysWebView” value=“true”

f7 settings
statusbar: {
iosOverlaysWebView: true,
androidOverlaysWebView: true
}

2 
<div class="navbar">
    <div class="navbar-bg"></div> add this
    <div class="navbar-inner">
        ...
    </div>
</div>
3

I can’t recommend to use androidOverlaysWebView: true because on most android safe areas don’t work correctly or don’t work at all. Otherwise you can try to hard code statusbar height by setting:

.md.device-android {
  --f7-safe-area-top: 24px
}

in your CSS, but it is not reliable as on screen with notch it can any other value

1 Like
4

Thanks! I will try this solution.
I wonder if it possible to handle that notch-issue with Cordova plugin…

5

I found an easy way to detect notch (some kind of top safe-area) on Android by simple manipulations with Cordova Statusbar plugin. I tested that on couple devices and it works fine. But statusbar was deprecated in V5 (I still using V4). Is it possible to return this functionality back in V5?

How that works now:

  1. Enable statusbar overlay, but disable it for Android:
statusbar: {
  overlay: true,
  iosOverlaysWebView: true,
  androidOverlaysWebView: false
}
  1. On f7ready save window.innerHeight and immidiately call f7.statusbar.overlaysWebView(true). Wait a bit (I’m using setInterval) and then compare new window.innerHeight with old one. You will get a number. Now create <style> tag (and insert into the head):
:root { --f7-statusbar-height: ${statusbarHeight}px !important }
  1. Done! You can store this number in localStore to use it in future.

P.S. These manipulations done while splashscreen is still on the screen, so there are minimum amount of glitches. And of course only if theme.md is true.

P.S.S. Я точно не помню как там в V5 со статусбаром. Может там этот компонент и не нужен… Но почему-то у меня стойкое ощущение, что statusbar: {overlay: true} вроде бы тоже не работал в V5…

1 Like
6

Well, this is pretty hacky but yes, could work in some cases :slight_smile: But there are a lot of edge cases hard to cover , like:

  • imagine that somehow you have rotated device between you measure the height
  • if app supports landscape mode then “statusbar height” should be dynamic too

Instead of creating style, you can just apply style to HTML element:

$('html')[0].style.setProperty('--f7-statusbar-height', `${statusbarHeight}px`)
7

Thanks for the tip with setProperty, didn’t even think about that approach. :slight_smile:

You’re right about edge cases. My application locked in portrait mode so that trick works.

8

While testing this I found that property should be --f7-safe-area-top in Framework7 v.5.

Also, this is not related to this topic, but that information could save hours for you. Its about shrink Webview issue, when keyboard doesnt change Webview height on Android. The problem appears when you’re using cordova-plugin-keyboard and cordova-plugin-statusbar with overlaysWebView(true). This combo breaks shrinking of the Webview.

Maybe this issue on Github will help you: https://github.com/apache/cordova-plugin-statusbar/issues/110