Cordova Hide Status Bar

Question

I'm building an application for iPad with Phonegap and Framework7 and I can't seem to get the status bar to be hidden on the iPad no matter what I do.

I've tried to google out a few tutorials, including the following questions:

• How to remove iOS status bar with Phonegap Build?
• How to completely hide the status bar in iOS using Cordova?
• Cordova/Phonegap ignores fullscreen preference in config.xml on iOS

I've tried the solutions provided in all the answers of the questions above and my status bar is still there.

I've opened the project with xCode and I can see that the settings are configured fine:

For the iPhone settings in deployment info:

• Status Bar Style: Default
• Hide status bar (checked)
• Requires full screen (checked)

For the iPad settings in deployment info:

• Hide during application launch (checked)
• Requires full screen (checked)

In the Info > Custom iOS Target Properties, I have set the following:

• View controller-based status bar appearance: NO

I've also tried to use the JavaScript way when the deviceready event has been fired:

StatusBar.hide();

Update

When I run:

StatusBar.isVisible

The property returns false, however I still see the white bar at the top.

Answer 1

After some long hours of debugging, I finally figured out what the issue was.

In fact, the status bar was hidden, and the white bar we would see is the overlay provided by Framework7, which explains the following:

StatusBar.isVisible // false

Apparently Framework7 is hiding the status bar, but leaving a blank white bar on top of the application, which is a padding.

So to remove the bar, I had to remove the class with-statusbar-overlay from the html tag. And to do so, I added the following to my Javascript file:

document.documentElement.classList.remove('with-statusbar-overlay');

Note that the Javascript fix must be executed before the deviceready event. Otherwise, you will see the home view with the bar, then the bar will disappear. If you put it before the event, the user will never see the bar.

document.documentElement.classList.remove('with-statusbar-overlay');

Dom7(document).on('deviceready', function(){
    // Your code
});