StatusBar.hide() ruins the layout

1

I just downloaded the seed project and ran it, and it worked fine. However, after adding the code to hide the status bar, it no longer fits the screen.

How can remove it properly without messing up the layout?

This is the code I added to app.js

.run(function() {

    ionic.Platform.ready(function() {
        StatusBar.hide();
    });

})

And this is how it made it look (There’s text underneath the tab icons, it’s just been pushed down)

2

This is an open issue with Cordova right now. I’m pretty sure that there are a few issues tickets open for it, which you can see here

3

I’m in same trouble now. Do you have any suggestions to solve it without upgrading Cordova itself?

4

I resolved this issue by myself. I guess it was the fault of the documentation.
When we want to use Ionic as fullscreen mode, we have to write these code.

$ionicPlatform.ready ->
  ionic.Platform.fullScreen()
  if window.StatusBar
    StatusBar.hide()

Sorry, it’s coffee script but it is same thing in Javascript, call ionic.Platform.fullScreen() and add fullscreen css class in the body tag.

I could not know this is the correct solution of fullscreen mode in iOS. But I could fix this issue.

3 Likes
5

Hey sorry I didn’t get back to you in time but I’m glad you got it taken care of! I’m just going to post the pure javascript as well.

$ionicPlatform.ready(function() {
  ionic.Platform.fullScreen();
  if (window.StatusBar) {
    return StatusBar.hide();
  }
});
2 Likes
6

Thank you for your reply :smile:

I am a newbie but I think Ionic is great. Please continue to be updating it for easy implementation of mobile apps by Javascript, HTML and CSS. Cheer :smile:

1 Like
7

I found this post helpful - but it has the same issue on latest Beta6 on ios7. Does anybody else see it?

Only way I can fix it is changint .tabs css to 25 px. I dont think it’s going to work cross platform. Any suggestions?

-ixixix

8

This is a known issue for the cordova plugin. Best thing to do is make an issue for this on cordova’s issue tracker

9

You can just do the following. The only issue that I have found is if you have a footer, it is cutoff. I reported this issue on github. Also, be sure to look at the arguments that you can pass to fullScreen function as well.

if (ionic.Platform.isIOS())
	ionic.Platform.fullScreen();
10

Hi, i can do this only in a specific views?

1 Like
11

I want to be able to hide the StatusBar without using the
ionic.Platform.fullScreen();

Is this possible?

12

I decided to hide the iOS status bar…using the JS you posted my entire app screen is now white, its like the status bar is now taking up the whole screen or something, hiding my actual app behind it. I can see my app in the Xcode console still deploying correctly, its just hidden behind this white screen now:

Interestingly enough though, the status bar is gone…but so is everything else. lol.

What else can I do or look at to fix this?

if (device.platform == "iOS") {
  console.log("platform: " +device.platform) ;
  ionic.Platform.fullScreen();
  if (window.StatusBar) {
    return StatusBar.hide();
  }
}