Hide header bar on landscape orientation

ionic-v1
1

Hi All - Just curious if anyone has a good sample of how to hide the header bar when the app is being viewed in landscape. I’ve seen people using window event listeners, but if feels like there should be a more elegant solution using angular (ideally some sort of ng-if on the header bar itself)?

Thanks in advance!

2

Why bring js into this when css can be used.


@media only screen and (orientation: landscape) {
  .platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) {
    display: none;
  }
  .platform-ios.platform-cordova:not(.fullscreen) .has-header,
  .platform-ios.platform-cordova:not(.fullscreen) .bar-subheader {
    top: 0px;
  }
}

Or if you just want to shrink the header down to the standard 44px


@media only screen and (orientation: landscape) {
  .platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) {
    height: 44px;
  }
  .platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * {
    margin-top: 0;
  }
  .platform-ios.platform-cordova:not(.fullscreen) .has-header,
  .platform-ios.platform-cordova:not(.fullscreen) .bar-subheader {
    top: 44px;
  }
}
3

Worked perfect - thanks!