The Status Bar Issue on IOS7

ionic-v1
1

Hi, on iOS7, all the applications are running full screen, and the status bar overlays my application.
I’m just trying with you seed master example.
Do you have any idea on how to solve this issue?

2

@andrea do you have a screenshot to share? Also, are you including the 'ionic' module in your angular app? The platform extensions we have should auto detect iOS 7 and then push the header bar down.

3

I have the same issue, status bar overlaying the header. I’m not using Angular, but plain Ionic (I use Durandal + Knockout).

4

Okay, to do this without Ionic but using Phonegap, you’ll want to listen for the deviceready event then call ionic.Platform.detect():

document.addEventListener("deviceready", function(e) {
  ionic.Platform.detect();
}, false);

This will then apply the platform specific class stuff (iOS only at this point). If you use Angular you get this for free, but I’d like to make this platform API a little more automatic in the future.

let me know if that works!

5

Thank you @max, but it doesn’t seem to work. I added ionic.Platform.detect() in the callback I already use on deviceready but the header still overlays the status bar!

6

Okay, I’ll look into that. It should work just fine since that is what the angular version is doing.

7

@max below the error that xcode give, this forum don’t give any chance to upload a screenshot of my ios simulator.

2013-12-02 15:12:17.202 StarterApp[6934:70b] Multi-tasking -> Device: YES, App: YES
2013-12-02 15:12:17.208 StarterApp[6934:70b] Unlimited access to network resources
2013-12-02 15:12:17.348 StarterApp[6934:70b] Resetting plugins due to page load.
2013-12-02 15:12:17.506 StarterApp[6934:70b] Finished load of: file:///Users/andrea/Library/Application%20Support/iPhone%20Simulator/7.0.3/Applications/0F5DC035-0731-472E-9109-E374E2FD7A6D/StarterApp.app/www/index.html#/home
2013-12-02 15:12:17.549 StarterApp[6934:70b] CDVPlugin class CDVDevice (pluginName: Device) does not exist.
2013-12-02 15:12:17.550 StarterApp[6934:70b] ERROR: Plugin ‘Device’ not found, or is not a CDVPlugin. Check your plugin mapping in config.xml.
2013-12-02 15:12:17.550 StarterApp[6934:70b] -[CDVCommandQueue executePending] [Line 127] FAILED pluginJSON = [
“Device1450200349”,
“Device”,
“getDeviceInfo”,
[

]
]

8

Okay, I just figured out the issue :smile:

The problem was we were bundling some default plugins with the seed repo, and Cordova didn’t like that. A quick fix is to remove all the files from plugins/ in your project and then run:

$ cordova plugin add org.apache.cordova.device

Then

$ cordova build ios or whatever platform you are on.

I just fixed that in the repo. This should work now.

9

I reloaded the project and reinstall but nothing is changed.
Are you sure that the bug has been solved?

10

@andrea, this works for me. One thing is that Cordova’s deviceready event is finicky and if you miss it you’re done. Try adding this before the end of </head>:

   <script>
      document.addEventListener('deviceready', function() {
        ionic.Platform.detect();
      });
  </script>
11

OK, it’s works for me too thank you @max

1 Like
12

I am having an issue with this. I applied the deviceready detection and that seemed to work, however only the header gets pushed down. Here is a screenshot:

I don’t really have any custom CSS yet so is there a way to get Ionic to push the rest down too? It also didn’t push down anything in the sidemenu that pops out, only the header.

Thanks

13

FIgured it out. I needed to wrap my content in the has-header. User error.

14

Thanks @max! This fixed it for me as well, after adding the Cordova device plugins.

15

So what is the best way to go when you are actually using AngularJS all over the place @max ?
I’m having the same problem as discussed here but can’t really figure out a correct way to fix it. When looking into the source it seems that $ionicPlatform doesn’t have a .detect() method.

And when should I listen for deviceready? I prefer not to add anything in my <head>

16

Can you give me info on the problem. I’m not sure exactly which issue you are having. Can you post a screenshot?

More info that would be good:
Config.xml settings?
Ionic version
Angular version (if you’re not using the same version released with your version of Ionic)

contents with meta tags
17

@Robin, I think you are referring to the ready() function on $ionicPlatform. Try this:

angular.module('myModule', ['ionic'])
.run(function() {
  $ionicPlatform.ready(function($ionicPlatform) {
    StatusBar.hide();
  });
});
18

Hi @max thanks for the effort. I’m not trying to actually hide the statusbar. It just needs to align properly with my header.
@Calendee My issue is exact the same as the OP has. If it’s still unclear, I can provide you with a screenshot later.

19

Hi @max, thanks for your work on this. Your solution to put the code in the .run() method at the beginning of the entire app worked perfectly for me. I had in a controller but I think the timing issue you mentioned was giving me grief. You might want to mention this strategy in the official platform docs.

20

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