Content going below subheader

ionic-v1
1

trying to put a search bar as sub header ,but it is not aligning properly.

(pull down the content on right to see the entire contents)
please advise

sree

2

Try replacing this

 <div class="bar bar-subheader item-input-inset">
<label class="item-input-wrapper">
    <i class="icon ion-ios7-search placeholder-icon"></i>
    <input id="searchKey" type="search" placeholder="Search" ng-model="search.$" autocorrect="off" >
    <button class="button button-clear" ng-click="clearSearch()">X</button>
</label>
<button class="button button-clear" ng-click="search()">Search</button>

With this:

<ion-header-bar class="bar bar-subheader item-input-inset">
        <label class="item-input-wrapper">
            <i class="icon ion-ios7-search placeholder-icon"></i>
            <input id="searchKey" type="search" placeholder="Search" ng-model="search.$" autocorrect="off" >
            <button class="button button-clear" ng-click="clearSearch()">X</button>
        </label>
        <button class="button button-clear" ng-click="search()">Search</button>
</ion-header-bar>

If you use the ion-header-bar directive, the ion-content will adjust its position to fit the available space.

3 Likes
3

cool, that worked!!

thanks

4

one follow-up question on this one-
if you click check-in or attendees options from the side menu , the right panel does not have a sub-header , also gave has-header=true , but it is partially hiding under the header?

thank you

5

In the sample you posted, there is not sub-header defined for attendees or check-in.

    <script id="attendees.html" type="text/ng-template">
      <ion-view title="Event Attendees" left-buttons="leftButtons">
        <ion-content>
          <div class="list">
            <ion-toggle ng-repeat="attendee in attendees | orderBy:'firstname' | orderBy:'lastname'"
                        ng-model="attendee.arrived"
                        ng-change="arrivedChange(attendee)">
              {{ attendee.firstname }}
              {{ attendee.lastname }}
            </ion-toggle>
            <div class="item item-divider">
              Activity
            </div>
            <div class="item" ng-repeat="msg in activity">
              {{ msg }}
            </div>
          </div>
        </ion-content>
      </ion-view>
    </script>

Also, note that in the Beta has-header and has-subheader are not used anymore.

Here is a working sample that has subheaders on all pages.

6

if you add sub-headers, it aligns properly, in some of my pages there are no sub-headers, In this case how do we align the content correctly below the header.

Took your code and removed sub-headers-

Sree

7

Ahhh… I see. When, you have a sub-header on the first page, it breaks they layout on all the other pages that don’t have sub-headers.

That definitely looks like a bug to me. I’ve opened Issue # 1095 : https://github.com/driftyco/ionic/issues/1095

8

Andy fixed this in the nightly. Thanks for pointing it out.

9

Thanks for the quick fix :slight_smile: will try it out and let you know soon.

10

Hey i have the same problem.

I used ion-header-bar tags for my headerbar and added a ion-header-bar with class bar-subheader below.

Sadly, the subheader lays over my ion-content :frowning:

Greets and thanks!

11

bengtler -try using the nightly build, it worked for me.

12

yeah but my app is very complex… and i do not have the time and i do not feel like it to restructure, redesign my app.

So i have to deal with it for now.

Thank you msreekm!