Ionic add header which does not scroll with list

2
votes

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.

2
cssionic

2 Answers

6
votes

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.

1
votes

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