In my config.xml file, I have the following preference:

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

yet… it appears that the status bar overlays the web view. See here:

Am I missing something? Are there any additional preferences to achieve the desired effect?

Did you generate this from the Ionic CLI?
Do you have the status bar plugin installed?

Yes, the app started out as the seed project, which was generated from the CLI. Is that what you mean?

My plugins listed by cordova plugin list are as follows:

[ 'org.apache.cordova.console', 'org.apache.cordova.device', 'org.apache.cordova.statusbar' ]

So looks to be installed correctly to me…?

Hmm, in your app.js, do you have this ?

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.StatusBar) {
      // org.apache.cordova.statusbar required

Thank for the quick replies. I did not have that snippet of JS added, but have managed to get it (sort of) working by re-installing the plugin. Now I am half way to achieving the look I have in mind, but need some margin between the status bar and the ion-nav

As you can see, there is some overlap. Is this something set in the StatusBar plugin or should I just add some margin using CSS?

What template is this based off of? The tabs, side-menu, or blank? If you started off from the CLI, it should take care of this automatically? Just curious

It’s the ‘tabs’ one. Looks like the webview is still the full height (480px?) rather than removing 20px (or so…) to factor in the space the status bar takes up…

well no, the web view should take up the full height. The header will just apply a margin of 20px and push all its content down. Do you mind posting some code? Maybe a codepen with your css so I can take a better look at it?

I’ve been having the same issue, and use the Ionic CLI (side-menu) to install my app.

I have used $ionicPlatform.ready(function() {...} and reinstalled the plugins several times, but to no avail.

Please let me know if you find a solution.

In my experience this is usually the result of some JS code that is throwing errors. It could be code that is calling on a Cordova plugin.

When this happened to me for instance I had some code that was calling for the local-notifications Cordova plugin but I hadn’t installed that plugin in this particular project yet.

Please check the Xcode console to see if all plugins are loaded correctly, then check out all your controller / service / factory code to see if it is calling some js code that might be failing.

How did you color from black to white?