Ion-content not adjusting to ios7 status bar height

ionic-v1
1

I am having trouble trying to get an ion-content element to adjust correctly to the ios7 statusbar. It is a sidemenu app that includes the nav bar, ion-header-bar as a subheader, and the ion-content.
I have the device, statusbar, and ionic keyboard plugins installed and they are recognized in $ionicPlatform.ready.
The ion-content starts at the three buttons, but as you can see it is getting cut off by a height of the status bar:

Running Cordova 3.5.0, Ionic 1.0.0-beta.9, Xcode 5.1. This problem doesn’t exist in desktop Safari or Chrome

Any help is much appreciated!

Alvin

2

Can you provide some markup or a codepen? It could be the markup used to create the subheader. Try this.

<ion-header-bar class="bar-subheader"></ion-header-bar>
3

Thanks for the reply. I have that class for my subheader…here’s the markup

<ion-view title="test" hide-back-button="true">
  <ion-nav-buttons side="left">
      <button menu-toggle="left"class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-header-bar class="bar bar-subheader eventBar">
    <div>
      <a class="button button-icon icon ion-calendar" ng-click="openDatePicker()">
       <i class="ion-arrow-down-b"></i>
      </a>
      <p>{{search.formattedDate}}</p>
    </div>
  </ion-header-bar>
  <ion-content class="has-header has-subheader padding eventContent">
  <center>
  <div class="button-bar" id="eventFilter">
    <a class="button">1</a>
    <a class="button">2</a>
    <a class="button">3</a>
  </div>
  </center>
  </ion-content>
</ion-view>
4

OH I think I know…so here are the styles to adjust for the custom subheader size:

.bar.eventBar {
  height: 75px !important;
}
.has-subheader.eventContent {
  top: 120px !important;
}

I would need an additional 20px for the .has-subheader.eventContent to adjust for the statusbar…is there any way to include that besides hardcoding an additional offset?

5

You could add the class .has-eventContent to the specific ion-content

6

Do you mean a custom class to just pinpoint that specific ion-content to add 20px manually? How would one deal with different status bar heights?

7

Why would the status bar should be an issue, that should already be taken care of.

8

It seems to be causing an issue with custom subheaders. The .has-subheader.eventContent css selector selects the ion-content, so I am already trying to push it down because of the bigger subheader bar of height 75px.

The default size of the subheader is 44px, and the .has-subheader defaults to “top: 88px” which renders fine with the status bar in the emulator. However, once I change the subheader height to a custom height the ion-content doesn’t seem to respect the status bar height. Everything loads fine in desktop browsers but just not in my iOS emulator for some reason…

Would you be able to try and reproduce in an iOS simulator?