The Status Bar Issue on IOS7

Hi Robin

Did you get an answer to this or figure it out.
I have the same problem. My app works and looks fine on ios6 but has extra screen real estate taken up above the header that lloks the size of the statusbar. The status bar is still visibile (and I want it visible). This happens on a real device but looks ok in the emulator.

Any help greatly appreciated

thanks
Darren

So I ran in to this today because it was the first time I even tested it on an iOS device. Surprisingly 95% of the app worked and looked the same as on Android. In any case, I had to put this in the run method of the app.

ionic.Platform.ready(function(){
  ionic.Platform.fullScreen();
});

You shouldn’t have to do that according to the docs but there is some race condition happening somewhere that it isn’t being detected. In this way you will still have the status bar but the header will be moved up properly.

1 Like

Thanks jazz

I have added the following code to the run method

myApp.run(function() {
var showFullScreen = true,
showStatusBar = true;
ionic.Platform.ready(function(){
ionic.Platform.fullScreen(showFullScreen, showStatusBar);
});
});

This works well now on my ios6 and ios7.1 device - ie. I have a statusbar and a correctly sized header bar. The weird thing now is that when i run in the ios emulator it pushes the header bar up now. So I have a statusbar and a squashed header bar. I can live with this as it is good in the physical devices

thanks
Darren

The real fix for this has to go in the core once the reason is found. This is just a work around if you are testing apps right now. On the simulator I am using it works fine too. It does throw an error in a desktop browser though as statusbar doesn’t exist. You have to do a platform check first to get rid of that.

agree

you can use ‘cordova serve’ command from your www directory then pick the ios (or android) platform from the localhost website on your browser and you don’t get the statusbar not referenced error as the cordova files are included at that level

cheers

Hi @darrenahunter

My issue got solved as soon as I did what @jazzfanatic said:

Anyone have a full code sample they are willing to share that shows this problem. For all the samples apps I’ve put together, I can’t recreate the problem. It would help to have code we know causes it.

In any case, I am reaching out to the devs to point this out to them.

I’ll dig into this more and figure out why its not working 100% of the time without the ionic.Platform.ready wrapper. Thanks

I just committed some changes to the nightly build.

In practice the fullScreen method should work stand alone. It doesn’t have to be wrapped in dom or device ready, it doesnt need to be in ran inside of myApp.run(function() {}). However, the problem in debugging this is replicating the issues this group is experiencing.

Would I be able to get some assistance testing this? You should be able to put ionic.Platform.fullScreen(); anywhere in your code and internally it’ll do the appropriate checks to move to full screen when everything is ready (both dom and device).

Also as a reminder, be sure to update your CSS too since certain css classes are required to correctly adjust the for the status bar. Thanks

http://code.ionicframework.com/#nightly

I added an issue for this problem last week: https://github.com/driftyco/ionic/issues/771

Still borked in the latest nightly.

Could I ask for assistance trying to debork this? I’m not able to replicate your issue on any of our iOS devices or simulator.

I’m installing ionic with Bower - maybe the Bower repo is behind?

But sure, I’ll try again whenever the nightly is updated. Or if you have a suggestion for debugging this…

Using public release 1.0.0 beta 1

I’m experiencing the same problem as described in this thread as well as (http://forum.ionicframework.com/t/navbar-is-under-the-status-bar-on-ios-simulator/).

Only on ios 7.x (as works fine with the black status bar in ios 6.x)

After uninstalling ALL of my plugins and re-installing them it modified the look slightly by instead of being completely under the status bar and having the correct proportions; it’s now under the status bar and injecting a padding or something to “bar” and/or “bar-header” css classes to push text or other elements down.

This causes the proportions of the header to become taller to account for the status bar; which of course throws the balance of the header element off completely (as text is no longer vertical center). And also kind of just pushes the problem down since my header will now overlap content in scrollview. (not to mention the ion-side-menu would still remain under the status bar; as well as any pages that did not have a header bar)

Q: Can someone confirm that the ionic method to fix is injecting additional padding/height to the header/navbar? And if so, is there a way to bypass this and prevent it from happening?

I would prefer to opt for a custom method of adding a div the height of the status bar that I can style any color I want.

Can you try this process from a brand new projected generated with the CLI?

See my notes in this semi-related issue. It shows how I started from scratch. I’d like to know if you have the same problem after starting from scratch and then modifying the project to go full screen. Also, please let us know what changes you’ve made to the new project.

I am getting the status bar over my content again. I’ve tried the remove device method, but that didn’t work.
I have the has-header class on my content.
Viewport is: initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width

Here’s what I am seeing.
Running nightly 1.0.0-beta.4-nightly-2029 (2014-05-08)

Any other ideas?

This happens when using the Phonegap Developer app, but not when using the ios emulator.

hmm, do you have the cordova device plugin installed?

cordova plugin add org.apache.cordova.device

Also, before (pre beta 1.0.0.4) I used to have to init my app like so:

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    $ionicPlatform.detect();
}

Although I am fairly certain that it is no longer necessary to detect the platform (one of the nice fellows from ionic would need to confirm that though :p)

Yes, I have the device plugin. I’ll have to look into the deviceready call.

I am having this issue with StatusBar plugin. I tried to reinstall it and then ran cordova build ios but it didnt help. I also have other plugins such as device and camera and they are all working fine from the same folder as StatusBar.

CDVPlugin class CDVStatusBar (pluginName: StatusBar) does not exist.
2014-05-13 00:36:29.483 StarterApp[3429:60b] ERROR: Plugin 'StatusBar' not found, or is not a CDVPlugin. Check your plugin mapping in config.xml.
    2014-05-13 00:28:34.929 StarterApp[3421:60b] -[CDVCommandQueue executePending] [Line 158] FAILED pluginJSON = [
      "INVALID",
      "StatusBar",
      "_ready",
      [
    
      ]
    ]

Have you upgraded Xcode to 5.1 recently? Then you need to also update Cordova to 3.4.1 and upgrade your Xcode project. More details about that here: http://shazronatadobe.wordpress.com/2014/03/12/xcode-5-1-and-cordova-ios/

If you have upgraded to Cordova 3.4.1 and you then add the iOS platform with cordova platform add ios you won’t have to take additional steps (recommended!).

If you have already added the iOS platform before upgrading cordova to 3.4.1, there are 3 manual steps to take to upgrade your Xcode project. They are detailed in the link above.

Unless you have any specific reason to not do so, I would recommend upgrading Cordova, then removing and adding iOS platform by using cordova platform rm ios and then cordova platform add ios. (Make a backup first just in case)

1 Like