How to remove the space at the top of Ionic Webview on iOS?

Question

It's my first time of my development with Ionic.

I have tried to remove the status bar in my application. Now, the status bar of the iPad Application was removed. However, there is still a space at the top of my Iconic view (which I think the size is as same as status bar). I have already set the Javascript file using this code for hiding the status bar, but it's not working.

ionic.Platform.ready(function() {
// hide the status bar using the StatusBar plugin
StatusBar.hide();
// ionic.platform.fullScreen();
});

How can I solve this problem or did I do something wrong? Thank you.

Here is the images comparing between on the web browser and iOS simulator

• Web browser http://i58.tinypic.com/2iuxmk6.png

• iOS http://i62.tinypic.com/eqxpfs.png

Answer 1

I had the same problem. I used:

ionic.Platform.ready(function() {
  //hide the status bar using the StatusBar plugin
  if(window.StatusBar) {
    // org.apache.cordova.statusbar required
    StatusBar.hide();
    ionic.Platform.fullScreen();
  }
});

The ionic.Platform.fullScreen(); was the thing from my project. That removes the space at the top.