Navbar is under the Status bar on ios simulator


#1

Using the ionic CLI and ionic start project then

cordova platform add
cordova emulate ios
osx 10.9
I get the following problem with the nav bar under the status bar
http://imgur.com/vTvtZRi


#2

Hey @timcash, did you install the org.apache.cordova.device plugin?

cordova plugin add org.apache.cordova.device

Then try, it should work.


#3

got it! thanks. I did see another post about it afterwards. Sorry about that


#4

I’m having the same issue, but do have device installed. Its strange because it does work sometimes, but not all the time. It seems to work almost 1/2 of the time, if I kill the app and reload it. It will first load up without the platform-ios7 class. I kill it and re-open and it loads up with platform-ios7. Again and it is missing it. It seems that the call to ionic.Platform.detect() is not always firing.

I have cordova.js listed after my ionic and ionic-angular* scripts, but before my app.js file.

$ cordova -v
3.3.0-0.1.1

$ cordova plugin list
[ ‘org.apache.cordova.device’ ]

$ bower list
bower check-new Checking for new versions of the project dependencies…
├── ionic#0.9.17-alpha
└── lodash#2.4.1


#5

Okay, thanks @dusty. I’m noticing these issues pop up with the new Cordova, so I need to dig into this and see what’s going on.


#6

Just made an issue here: https://github.com/driftyco/ionic/issues/331


#7

I have this issue as well. It seems that after I build with Cordova, then run in Xcode - all is well. Then, if I close the app in the simulator (or device) and then re-open (without Running again in Xcode), the problem arises.


#8

I had this issue after upgrading cordova to 3.3.0, what I did is removed and reinstalled cordova device and status bar plugins.

cordova plugin remove org.apache.cordova.device
cordova plugin add org.apache.cordova.device
cordova plugin remove org.apache.cordova.statusbar
cordova plugin add org.apache.cordova.statusbar

This seems to solve the issue for me.


#9

@credli suggested uninstalling and reinstalling device & statusbar plugins. Since I didn’t even have the Statusbar plugin, I decided to add it. Big mistake. Now with Ionic, the status bar color changes from black to white, but the Navbar is squeezed up against the status bar in iPad and iPhone.

Removed statusbar plugin and device. Then, reinstalled device plugin. Now, status bar is black in all devices. iPhone properly pads the Navbar. iPad does NOT pad the Navbar.


#10

I’m having this issues with phonegap 3.3 and ionic 0.9.22, is there a final solution? As I can see with default phonegap create, there is no need for device plugin because its working without device plugin installed. But I still dont have space in header.


#11

Ok, got the same issue as @Calendee running from xcode goes well (installed plugin device) but running directly doesn’t fires the event. strange


#12

What’s your <meta> look like?

Should probably start with at least this:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


#13

I tried many options, and not sure if its my order or what, sometimes works sometimes not :frowning:
this is my head content:

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>My app</title>
<!-- ionic css -->
<link href="lib/css/ionic.css" rel="stylesheet">
<!-- your app's css -->
<link href="css/app.css" rel="stylesheet">
<!-- angularjs scripts -->
<script src="lib/js/ionic.js"></script>
<script src="lib/js/angular/angular.js"></script>
<script src="lib/js/angular/angular-animate.js"></script>
<script src="lib/js/angular/angular-sanitize.js"></script>
<script src="lib/js/angular-ui/angular-ui-router.js"></script>
<script src="lib/js/ionic-angular.js"></script>    
<!-- cordova script -->
<script src="phonegap.js"></script>
<!-- <script src="lib/js/utils/platform.js"></script>  --> 
<!-- Plugins -->
<script src="plugins/localStorageModule.js"></script>
<!-- your app's script -->
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script> 

#14

Had the same problem, updated ionic and phonegap, and then reboot the system and created a new project.


#15

Yeah, I think I will do the same, because its seems that something is messing with something :slight_smile: and I think I made all by the rule… thanks, will try and get back to


#16

I see correct status bar first time I run it from xcode, second time I run it by phonegap run ios its not working. Its getting annoying because not sure if its bug or what :frowning:


#17

I was having intermittent problems like that too. It went away a while back. Check this. After running a build, look at the compiled config.xml file. Does it still have the settings you gave it?

If not, the problem is the defaults.xml file is overwriting your own. See : http://stackoverflow.com/questions/20883548/phonegap-access-origin-restrictions-dont-work.

Dabble with that and see if you can get it to stop.


#18

Wow, finally I was able to trace this down thanks to @Calendee, I removed unnesesarry from default.xml and moved all important to my config, what was missing in some part was this line, so I moved this to my config.xml.

<feature name="Device">
    <param name="ios-package" value="CDVDevice" />
</feature>

This is what I hate about phonegap, they are changing this plugin stuff so fast that if you are not like every week on it, you lost it :slight_smile: and their documentation just sucks.

Thanks again Justin!


#19

Glad it helped. It kicked my butt for a while too. Then, I forgot to post anything about it. This should be a good reminder to anyone else having trouble.

Tags : status bar, statusbar


#20

Still seeing this issue on salamander. I hope it gets worked out with the Beta. I’ve tried the above to no avail.