iOS statusbar overlay phonegap

Question

I'm developing iOS app with PhoneGap (Cordova) and my problem is that status bar is overlaying my webview/application:

I've added preferences in my config.xml file but these are not working:

<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#0ff000" />
<preference name="StatusBarStyle" value="default" />

How can i solve that?

Answer 1

Installation Command for Status bar Plugin

cordova plugin add cordova-plugin-statusbar 

StatusBarOverlaysWebView (boolean, defaults to true). On iOS 7, make the statusbar overlay or not overlay the WebView at startup. Add this line in your config.xml

<preference name="StatusBarOverlaysWebView" value="false" />

Please read official documentation for better understanding

Answer 2

Solved this way: With cordova-plugin-statusbar installed, added this line to config.xml:

<gap:plugin name="com.phonegap.plugin.statusbar" />

and then in index.html:

<script type="text/javascript">
        document.addEventListener("deviceready", onDeviceReady, false);

        function onDeviceReady(){
            StatusBar.overlaysWebView(false);
        }
</script>

Answer 3

Check out Step 3: at the bottom of the page at this link...

https://ccoenraets.github.io/cordova-tutorial/handlebars-templates.html

It actually looks pretty identical to what you did, but also involves a node plugin for the status bar issue.

cordova plugin add cordova-plugin-statusbar 

Hopefully it helps.