I am trying to put a “button-bar” right below my “ion-nav-bar”. I need the ion-nav-bar because the app has many states (tabs), but in each tab I need to have 2 modes (Cook/Takeout). Below the button bars is an ion-list with pull to refresh. However, the button bars are coming above the list and the list starts just below the ion-nav-bar. How can I make the order be:
ion-nav-header
button-bars
ion-list
with the pull to refresh spinner, list etc. showing up below the button bars?
Here is my code (derived from the ionic starter template):
<ion-view view-title="Dishes">
<ion-content>
<div class="bar bar-header">
<div class="button-bar">
<a ng-click="selectTimePeriod(0)" class="button">Eat Out</a>
<a ng-click="selectTimePeriod(1)" class="button">Eat In</a>
</div>
</div>
<ion-refresher pulling-text="Pull to refresh" on-refresh="doRefresh()">
</ion-refresher>
<ion-list>
<ion-item class="item-remove-animate item-thumbnail-left item-icon-right" ng-repeat="dish in dishes" type="item-text-wrap" href="#/tab/dishes/{{dish.id}}">
<img ng-src="{{dish.thumbnail_img}}">
<h2>{{dish.name}}</h2>
<p>{{dish.lastText}}</p>
</ion-item>
</ion-list>
</ion-content>
</ion-view>