Gap above header at top of screen when in fullscreen on iOS 7. Android displays properly

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.

2 Likes

Do you have a screenshot you could post?

Seems new users can’t upload so here is a link

Did a little more digging into this and I noticed in _platform.scss:

.platform-ios7 {
  .bar-header {
    height: 64px;

    > * { 
      margin-top: 20px;
    }   
  }
  
  .has-header {
    top: 64px
  }

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?

Whoa, that’s pretty cool looking app, well done.

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.

Yea, this should only be there when the header bar isn’t transparent. I wonder the best way to do this…

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.

Thanks

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.

Hi Adam,

Looks like the fullScreen() method doesn’t add the header CSS when using a header-bar instead of a header element. Any ideas for a fix or work-around?

Could you show me the markup you’re using?

Actually using the frosted-bar demo code right now:

   <pane side-menu-content>
       <header-bar
           align-title="center"
           animation="nav-title-slide-ios7"
           frosted-bar
           left-buttons="nav"
           title="'Title'"
           type="bar-frosted"
        ></header-bar>
  <content has-header="true" padded="true">

However, removing the frosted-bar directive has the same effect.

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

You can customize this size onto the _variables.scss file, just changing this variable: $ios-statusbar-height

1 Like