user3679607
user3679607

Reputation: 163

Ionic add header which does not scroll with list

I'm working with Angular.js and Ionic now and I have a view that looks like this:

<ion-view view-title="My list">
  <ion-content>     

  <!-- checkboxes with items -->
  <div>
     <ul class="list">
        <li class="item item-checkbox" ng-repeat="myItem in myItems">
           <label class="checkbox">
              <input type="checkbox" ng-model="myItem.checked">
           </label>
           {{myItem.Name}}
        </li>
     </ul>
  </div>

  </ion-content>
</ion-view>

And now I want to add a second header which has to be under the main header with the title My list (ion-view).

I found out when I add such code (as below) between the opening ion-content and the div which contains the list

<div class="bar bar-header bar-positive>
...
</div>

the header also does scroll. I don't want that. The header has to be placed fix under the main header.

That is because of the ion-content element. But when I declare the secondary header outside of the ionic-content, I can't see the header.

Maybe you know some advices for me. Thanks.

Upvotes: 2

Views: 9561

Answers (2)

rrjohnson85
rrjohnson85

Reputation: 412

The following should work fine for you:

<ion-view view-title="Playlists">
  <ion-header class="bar bar-balanced bar-subheader">Test</ion-header>
  <ion-content class="has-subheader">
    <!-- content -->
  </ion-content>
</ion-view>

One of the important things to point out is the has-subheader class applied to the content directive. Without this CSS class, the subheader will overlap some of the content.

Upvotes: 6

dupe
dupe

Reputation: 11

What you are looking for is a subheader, rather than a header below your current header.

Try this:

<div class="bar bar-subheader bar-positive">
  <h2 class="title">My list</h2>
</div>

More details here: http://ionicframework.com/docs/components/#subheader

Upvotes: 1

Related Questions