Reputation: 163
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
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
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