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.
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.
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
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.
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
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 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
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)
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)
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",
[
]
]
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)
