I’ve written some jade that looks like the following:
html
body
side-menus
pane(side-menu-content, drag-content="false")
header.bar.bar-header.bar-clear
.buttons
...
h1.title My Title
I’ve disabled the status bar to achieve the full screen effect with:
Platform.ready( () -> StatusBar.hide() )
Everything looks great on an Android device and in the desktop browsers. On iOS 7, there is still a noticeable gap above my header that seems to be about the height of the status bar. My background image shows through as expected where the status bar used to be but the header will not shift up to the top of the screen.
Without this margin-top declaration, everything appears to slide up into the expected position. I’m trying to find the ionic code that would update the margin-top: 20px based on the presence of the iOS status bar. Am I correct in assuming that this is how ionic is intended to work?
As for the iOS7 gap, it is on purpose, but we haven’t put in to remove the margin-top if the status bar should be hidden. I’ll create an issue so we take care of that. In the meantime you could just override that css for your app.
Thanks @adam. For now overriding the style works perfectly.
I’m happy to assist via pull-request if you could point me to where something like an ionic bootstrap happens. I’m imagining some platform specific code block that could be invoked after ionic.Platform.detect(); has completed. I’m sure you’re aware of StatusBar.isVisible that could be used to add/remove classes from header elements.
I just created ionic.Platform.fullScreen() that will both hide iOS7’s status bar with StatusBar.hide(), and change up the CSS (be sure to have org.apache.cordova.device plugin installed). Also note that you won’t have to worry about Cordova being ready to call this, just run ionic.Platform.fullScreen() in your app code and it’ll fire off StatusBar.hide() when it can.
It’s in the master branch, and will come out with v0.9.21.
Please let us know how it works for you, thanks for letting us know about the issue.
ionic.Platform.fullScreen() worked perfectly for me. I’m using <div class="bar bar-header">. Also, you can just paste the code in a controller - it takes care of waiting for the Platform.ready() event