The iOS 7+ allows you to build full screen apps which could create an issue when your status bar overlaps your app. Framework7 solves this problem by detecting whether your app is in full screen mode or not. If your app is in full screen mode then, the Framework7 will automatically adds with-statusbar-overlay class to <html> (or removes if app is not in full screen mode) and you need to add statusbar-overlay class in <body> as shown in the following code −
<html class = "with-statusbar-overlay"> ... <body> <div class = "statusbar-overlay"></div> ...
By default, <div> will always be hidden and fixed on top of your screen. It will only be visible when the app is in full screen mode and with-statusbar-overlay class is added to <html>.
The following example demonstrates the use of status bar in the Framework7 −
Let us carry out the following steps to see how the above given code works −
Save the above given html code as status_bar.html file in your server root folder.
Open this HTML file as http://localhost/status_bar.html and the output is displayed as shown below.
The example shows the use of the statusbar-overlay, which allows you to build full screen apps when your status bar overlaps the app.