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

ionic-v1
1

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>
  </button>
</ion-nav-buttons>

<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">
        </label>
        {{ count }} Left
    </div>
</ion-header-bar>

<ion-content scroll="true">

    <!-- redacted -->

</ion-content>

Any ideas?

1 Like
2

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">
    </label>
    {{ count }} Left

3

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

4

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

5

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).

2 Likes
6

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

1 Like
7

I found the same issue. Removed .bar, looks fine on android and desktop, but still too much top-padding on iOS. Screenshot: https://www.dropbox.com/s/bviixm9nqk3pe9f/iOS%20Simulator%20Screen%20shot%20Apr%2023%2C%202014%202.59.35%20PM.png

8

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

9

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?

10

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

11

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>
12

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