Status bar overlay

iOS 7+ allows you to have make full screen apps. But there could be such problem when status bar overlap your app:

Not good!

Good!

Framework7 helps you to solve this issue. It automatically detects if your app in full screen mode, and automatically adds "with-statusbar-overlay" class to <html> if app in full screen mode (or remove this class if app not in full screen mode). With this "with-statusbar-overlay" class (when app in full screen mode) <html> has additional padding on top to move bottom whole app's content on size of Status bar (20px).

Now, when Framework7 did its job on this part, we can control background color of Status bar, we need to add <div class="statusbar-overlay"> right in <body>:

...
<body>
  <div class="statusbar-overlay"></div>
  ...

This "statusbar-overlay" div is always fixed on top of screen and hidden by default. It becomes visible only when app is in full screen mode and html has "with-statusbar-overlay" class.

We need just one CSS rule to make our status bar background pink:

.statusbar-overlay {
    background: pink;
}

Such logic allows pretty flexible control over Status bar background and we can change its background dynamically.

For example, we have dark left-side panel with cover effect. We may change Status bar background to more dark color when panel opened:

/* Default Status bar background */
.statusbar-overlay {
    background: pink;
    /* We can add transition for smooth color animation */
    -webkit-transition: 400ms;
    transition: 400ms;
}
 
/* Change Status bar background when panel opened */
body.with-panel-left-cover .statusbar-overlay {
    background: #222;
}       

Problems

  • On home-screen web apps Status bar text color is always white. There is no way to change it.

  • In PhoneGap apps Status bar text color is always black by default. It can't be changed from Framework7, but can be customized with PhoneGap plugins like cordova-plugin-statusbar