Sub-header too low on ios7 device (fine on desktop)


In a desktop browser it looks fine, but on my iphone 5 there’s some extra margin on top of the subheader. Seems to be exactly equal to the device’s status bar area height.

I’m assuming this is a minor bug in the framework, but if it’s something I’m doing wrong please let me know. Is anyone else experiencing this? Thanks

Here’s how it looks on the phone:

Here’s how it’s supposed to look, from desktop browser:

Here’s my code:

<ion-view title="Share With A Few" class="create-share hide-tabs">

<ion-nav-buttons side="right">
  <button class="button button-clear" ng-click="next()" ng-show="selectedCount > 0">
      <i class="icon ion-arrow-right-c"></i>

<ion-header-bar class="bar-subheader">
    <div class="item item-input-inset search-form">
        <label class="item-input-wrapper">
          <input type="text" placeholder="Search here and choose below" ng-model="searchStr">
        {{ count }} Left

<ion-content scroll="true">

    <!-- redacted -->


Any ideas?


Maybe just be some mix up in the markup, give this a shot

  <ion-header-bar class="bar-subheader item-input-inset">
   <label class="item-input-wrapper">
      <input type="text" placeholder="Search here and choose below" ng-model="searchStr">
    {{ count }} Left


Ok, thanks. Tried that. Here’s what it looks like now on the device: (Still looks fine on desktop)


Hmm, do you have any custom css applied? I’m just using default styles and mine looks fine.


I’m having this exact same issue on iOS. The subheader looks great in the desktop browser and on Android, but is too tall on iOS.

I am using:

<ion-header-bar class="bar-subheader bar-calm item-input-inset">

I can make the subheader appear correct on iOS and desktop using this:

<div class="bar bar-subheader bar-calm item-input-inset">

However, it then looks wrong on Android (the subheader being too short and the content not butting up to it).


I switched to the nightlies and this issue seems to have gone away. Thanks


I found the same issue. Removed .bar, looks fine on android and desktop, but still too much top-padding on iOS. Screenshot:


I also encountered the same problem, can you tell me how you solve it?


I also encountered the same problem, and I feel it should be optimized for ios7’s status bar but did not distinguish between sub-header and header, is there any better way to solve this problem?


What version of Ionic are you using? This was an issue in Beta 1. I believe it was fixed in 2 or 3.


In my desktop browser and on an Android device the sub-header looks great. On my iPhone 6+, the Ionic sub-header is too tall. Did anyone find a fix to this?

Here’s my code:

> <ion-header-bar class="bar-calm">
> 	<h1 class="title">{{podFollowerScheduleEntry.podPost.calculatedPodName}}</h1>
> </ion-header-bar>


I’m using Ionic v1.0.0-beta.13.