Prevent / modify iOS7 status bar/header shifting in Phonegap?

ionic-v1
1

It’s my understanding that if Ionic is in Phonegap on iOS7, it shifts down to compensate for the translucent bar on the top. This behavior can be verified by running in Phonegap with and without the device plugin. (With device plugin, the shift occurs) Unfortunately for my app at the moment, it really screws up the look and feel. Where is this behavior in the code? I found the detection, but I couldn’t find where the actual adjust was made. Also is it possible to prevent or modify this adjustment?

Thanks.

2

OK, it looks like Ionic adds the class style platform-cordova and platform-ios7 to the body element. You can find these styles in ionic.css:

.platform-ios7 .bar-header {
  height: 64px; 
}
.platform-ios7 .bar-header > * {
  margin-top: 20px; 
}
.platform-ios7 .has-header {
  top: 64px;
}

So a person could simply override these class styles for modification.

3

Hey @jprichardson, do you have a screenshot or something of what this is messing up? Maybe we need to apply some changes to other elements in this situation.

4

I get the same issue… Heres a screen: http://cl.ly/image/3z0r1F3l2y29

1 Like
5

@aske You’re getting the opposite of what I was referring to. The behavior that you see is expected. Are you running that in the web browser? If so, just add platform-ios7 to the class attribute of the body element. If you’re running in Phonegap/Cordova, install the device plugin.

6

Oh i thought it was the same issue… Anyway i tried adding the platform-ios7 class and it fixed it… But now its hardcoded so ios6 users would see an extra margin at the top i guess…

Im running Cordova and i have installed the device plugin…

UPDATE: Turns out the device plugin wasn’t properly installed… It works now

1 Like
7

Nice looking app by the way @aske. Let me know if you want us to put it up as an example linking to your site when you are done, we are always looking for demos to show :smile:

And the margin detection should only add the padding if on iOS 7 or above, so iOS 6 shouldn’t be impacted. If you added the class manually then that won’t be the case, unfortunately.

8

Thanks @max, ill let you know as soon as its ready :slight_smile: