On iOs ( 8 but also 7 ) the header height is too big.
While tracking this I found that the scss says that :not(.fullscreen) should be 64px and adding fullscreen class to the body does make the trick.
Maybe i’m not getting it right but if fullscreen means no status bar that’s not what I want and if not should I and how can I add the fullscreen class the body?
EDIT : adding ionic.Platform.fullscreen(); the app is fullscreen and the header height is ok but no status bar. Which is the intented way I think but why then removing fullscreen makes the header that tall?
Thanks @mhartington the issue is that if not fullscreen, the header is 64px tall ( the +20 you’re talking about I think ) but i’m not sure you need to compensate the status bar. See the attached screenshot :
A codepen would not help since I only see it on device once build as an app.
The project cannot be posted on github because it’s a private one
I’ll look into it and come back if I have more informations since I understand it’s hard to help with so few informations.
I realized my issue is related to the fact that I am using Phonegap Build. By making changes to config.xml and adding the StatusBar.styleDefault(); script I managed to get it working better, not really sure how. The original statusbar is now hidden and the ios status bar content is on top of my app.
What config.xml to use when using phonegap build is really unclear. Theres no single place for information about this. Some settings is not working, maybe because phongap build has changed
I’m having a similar issue. I’ve updated to the latest version of Ionic, to be sure these aren’t solved issues.
Even when I put the call to ionic.Platform.fullScreen(); at the end of the .run block, the header is still too tall.
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleLightContent();
}
// make it fullscreen on IOS so it has the correct header size.
ionic.Platform.fullScreen();
});
})
However, if I run ionic.Platform.fullScreen(); in Safari developer tools console after the app is completely done booting, the header gets the correct size.
OK so after some more investigation, I found that adding this preference to config.xml:
causes that same preference to be added twice to the generated platforms/ios/build/emulator/MyApp.app/config.xml, once with a value of true and once with a value of false. I’m guessing this is possibly the cause of the issue?
OK apparently I had failed to use the --save flag when adding some of the plugins. It’s important that your plugin be declared in config.xml, apparently.
While I was at it, I blew away my platforms/ios and plugins directories for good measure, as well as updated cordova itself & moved from deprecated plugins to more recent versions. All in all, things working better now.
And I’ve verified that even with all-new everything, setting <preference name="StatusBarOverlaysWebView" value="false"/> in config.xml causes that preference to show up twice in the generated configs, which breaks things.
Same issue here also! Headers on iOS are way too tall, have to manually fix in CSS. I’ve set my status bar in config.xml to be solid (I set the overlay property to false also as I wanted this to be separate).
Here are the CSS fixes I wrote to make everything work properly (If you find them useful, some kudos would be nice! )
Thanks, this works.
Apparently Ionic does not cover the case when you want the Status bar to be visible but NOT overlapping the WebView, so the css fix is the only way to do it. Am I right, @mhartington?
)