The Status Bar Issue on IOS7

I tried this and it didn’t work. Any other suggestions?

This worked, but as soon as I install the device plugin, it breaks it again. I need the device plugin otherwise my geolocation won’t work. Suggestions?

Whenever you install a new plugin you must do:

  • remove the devicefolder from the platforms folder (like ios)
  • remove from the plugins folder the device josn file (like ios.json)
  • than add the platform from the terminal (like ‘ionic platform add ios’)

So, if you add a new plugin u must do the same steps again and again.
The problem is that the json file in the plugins folder is not overwritten if you add a new plugin. So u must remove it and grenade it again.

Hope it helps

This is a great tip, but I am still seeing the title bar pushed up under the status bar.
With device plugin:

If I remove the device plugin:

But then my maps won’t work. I’ve tried adding the status bar but it makes the text white and not much else.

Looks like its a maps load order error. Playing with it now.

I have my issue fixed for the most part. The load order of the scripts was screwing things up. I had to put my maps script before anything else. Once I do an Oauth login, the status bar collapses again.

I was running into this issue with the Ionic sample app with XCode 5.1, Cordova 3.4.1. I setup the same app just yesterday.

I reinstalled Cordova. Made sure XCode was fully up to date. Removed the iOS platform. Cleared the plugins directory. Then re-added the iOS platform and then manually re-added each plugin. Not sure what it was, but the issue is resolved.

As best I can tell from source control, at least in my app’s repo, the only thing that changed is the plugins, so perhaps that alone would have been sufficient?

These were the plugins that I had installed from the sample app: com.ionic.keyboard, org.apache.cordova.console, org.apache.cordova.device


i also have a little problem with iOS7 statusbar.

During the app starts, everything looks correct.
But after some time (ms) the header-bar moves down of the height of the statusbar.

Now i have the statusbar above then the headerbar with an empty area on top and then my headerbar content.

Looks very ugly. The only way i found to fix this issues was to set the header-bar height really to 44px with the !important flag.

Thank you,


I am running this using instead of cordova. Is there any way that this could be fixed through css and platform detection with whatever native framework that is chosen? This would also be good for people that are using this for webapp websites that don’t need native at all.

I think that there should be a class included doing what bengtler proposed, that is the way I am going to fix it for now, but it would be nice to make this a bit easier through ionic. I am not sure of the exact class for the nav-bar instead of the header-bar (sure it is the same).

I solved the iOS7 Status Bar issue by setting to be the last script to load.

This worked for me as well. Running cordova 3.5.0-0.2.7 and Ionic 1.0.0-beta.11

I’d like to know how you did