I started with a basic sidemenu app, and added a tab bar to one of the views. In each tab I plan to have a list of items. The problem I’m having is that the ionic-content in the ion-tab is going under the tab bar, so that part of it is hidden. I have tired adding has-header=“true” and has-tabs=“true”, but to no success. Below is my code and a screenshot depicting my problem.
<ion-view ng-controller="NewsController" view-title="{{name}}">
<ion-tabs class="tabs-stable tabs-striped tabs-icon-top">
<ion-tab title="News" icon-on="ion-ios-world" icon-off="ion-ios-world-outline" on-select="tab1()">
<ion-content has-tabs="true">
<!-- Tab 1 content -->
<ion-list can-swipe="listCanSwipe">
<ion-item ng-repeat="item in items">
<h2>Item {{item.id}}!</h2>
<p>Description</p>
</ion-item>
</ion-list>
<!-- End Tab 1 content -->
</ion-content>
</ion-tab>
<ion-tab title="Gurus" icon-on="ion-ios-people" icon-off="ion-ios-people-outline" style="padding-top:66px;" on-select="tab2()">
<ion-content>
<!-- Tab 1 content -->
<h1>Tab2</h1>
<!-- End Tab 1 content -->
</ion-content>
</ion-tab>
<ion-tab title="Insiders" icon-on="ion-ios-briefcase" icon-off="ion-ios-briefcase-outline" style="padding-top:66px;" on-select="tab3()">
<ion-content>
<!-- Tab 1 content -->
<h1>Tab3</h1>
<!-- End Tab 1 content -->
</ion-content>
</ion-tab>
</ion-tabs>
</ion-view>
In the screenshot, the list is scrolled all the way to the bottom. As one can observe, Item 7 and Item 8 (which is completely hidden) are both not fully displayed.