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

Question

This is my first time in my development with Ionic.

I tried to remove the status bar in my application. Now the status bar of the iPad application has been removed. However, there is still a space at the top of my Iconic icon (which, I think, is the same size as the status bar). I already installed a Javascript file using this code to hide the status bar, but it does not work.

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

How can I solve this problem or have I done something wrong? Thanks.

Below are the images that are mapped between a web browser and an 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(); } }); 

Ionic .Platform.fullScreen (); it was from my project. This removes the space at the top.

Answer 2

Did you install the statusbar plugin like this:

 $ cordova plugin add org.apache.cordova.statusbar 

Only after that you can delete the status bar:

 angular.module('myApp', ['ionic']) .controller('MyCtrl', function($scope) { ionic.Platform.ready(function() { // hide the status bar using the StatusBar plugin StatusBar.hide(); }); }); 

Answer 3

Perhaps its workaround might help ... this.statusBar.overlaysWebView(true);