StatusBarOverlaysWebView

1

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?

2

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

3

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…?

4

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

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

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?

6

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

7

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…

8

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?

9

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.

10

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.

11

How did you color from black to white?