Statusbar CSS gradient background

Questions
1

What would be the safest method to add a CSS background gradient to my iOS statusbar?

Currently it overlaps the WebView, which is fine because the gradient from my design is shown behind.

But this only works on iPhone 6/7/8. On iPhone X/11 it displays a white gap in the statusbar area and I need to fill this with a gradient, not a solid colour.

2

In v5 there is no statusbar as a separate element, that place under statusbar is taken with Navbar. So what f7 version do you use and screenshot of what you try to achieve and have will be helpful :slight_smile:

3

Thanks… Am building a new app, so I’m using latest version (v5.3.2). I’m not actually using Navbar classes, as I have a custom header which is a slightly different shape to standard iOS navbars. Perhaps I ought to be using a large navbar class and then just custom set the height CSS?

Annotation%202020-01-29%20215147
Annotation 2020-01-29 215147.png468×744 28.9 KB

The area at the top (blue arrow) is where the iOS white status bar sits currently (on iPhone 6/7/8) so it has a nice gradient behind it. But because the statusbar is set to overlap the webview, I have a shortage of view height at the bottom of the viewport (red arrow at bottom of image). Note that this is a desktop Chrome screenshot so it doesn’t show the statusbar in effect as it would on a device.

4

If you are not using Navbar then you need to handle it manually, in CSS the height of required area (statusbar height) is equal to var(--f7-safe-area-top).

5

In regard to the reduced height of the viewport (which is short at the bottom, the exact size of what the status bar background height is), what CSS do I change to make the view taller?

IMG_6513
IMG_6513.jpg750×1333 284 KB

I’m using iosOverlaysWebView: true to have the status bar sit over the top of my gradient background. Is there an additional location I need to add var(--f7-safe-area-top) to extend the height of the page?

46%20PM
Screen Shot 2020-01-30 at 2.55.46 PM.jpg1118×1962 213 KB

6

Update: If I hide and then show the app when running in the simulator, the vacant space at the bottom of the viewport is removed. Unfortunately this only happens on the simulator; If I repeat the action on a device, it remains.

When I removed plugin Cordova-plugin-wkwebview-engine, the problem went away. So, potentially there is a conflict between this plugin and the Statusbar plugin.

7

WKWebview is the must. Did you create this app with F7-CLI? If not, make sure to add this style to your CSS:

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

Thanks so much, this fixed the issue! And I was able to reinstall cordova-plugin-wkwebview-engine without causing any other issues.

I didn’t use the CLI because I was adding F7 to an older Cordova project which had existing code, and I didn’t want to chance compromising that code. Maybe next time I’ll create from scratch and add code from there. Now I’m worried I’m potentially missing out on other important CSS classes by not installing from the CLI.

1 Like