Reputation: 169
This is how the app is structured in terms of ionic directives.
Below is the index.html body html:
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<ion-tabs ng-controller="TabsCtrl" class="tabs-icon-top tabs-color-active-positive">
<!-- Main list Tab - includes favorites and viewed videos -->
<ion-tab title="Learn" icon-on="ion-ios-home" icon-off="ion-ios-home-outline" ng-click="setAsHome()">
</ion-tab>
<!-- Favorite videos Tab -->
<ion-tab title="Favorites" icon-on="ion-ios-star" icon-off="ion-ios-star-outline" ng-click="setAsFavorite()">
</ion-tab>
<!-- Viewed videos Tab -->
<ion-tab title="Viewed" icon-on="ion-ios-checkmark" icon-off="ion-ios-checkmark-outline" ng-click="setAsViewed()">
</ion-tab>
</ion-tabs>
then, the content of the ion-view comes from the file list.html, and it's html is as follows:
<ion-view title="Showing {{filtered.length}} videos">
<ion-nav-buttons side="right">
<a ng-click="openSearchModal()" class="button button-icon icon ion-search"></a>
</ion-nav-buttons>
<ion-content class="has-tabs">
<ion-list>
<a ng-href="#/detail/{{video.id}}"
class="item item-icon-right"
ng-class="{ 'item-divider': video.divider }"
collection-repeat="video in videos"
item-width="100%" item-height="135px">
<div class="row">
<h3 class="col cat">{{video.cat}}</h3>
<span class="col platform">{{video.platform | formatPlatform}}
</span>
</div>
<div class="row">
<h4 class="col col-100 title">{{video.title}}</h4>
</div>
<div class="row">
<p class="col description">{{video.desc}}</p>
</div>
<div class="row">
<span class="col year">session {{video.session}}, in <span>{{video.year}}</span></span>
</div>
<i class="icon ion-chevron-right"></i>
</a>
</ion-list>
</ion-content>
</ion-view>
Here, i wish to emphasize on that:
<ion-content class="has-tabs">
Notice that the ion-content directive has the has-tabs class.
When running this on iOS, all goes well between the header and the tab items, meaning the content fits in well at the top and at the bottom of the list, as shown on the screenshot below:
Now comes the series of problem I've encountered.
When I launch the same code on android, the screenshot below shows that even though the tabs are correctly positioned at the top, the space for the tabs at the bottom is still there. Look at the last row's chevron, it is cut off.
So, i tried removing the has-tabs class, thinking that ionic would probably handle this automatically, according to the platform, but content still does not fit properly.
Here are the iOS and android screenshot without the has-tabs class. Please note that in both screenshots below, the list is scrolled all the way to the top
iOS: the navbar overlaps with the very top row !
android: the navbar overlaps with the very top row !
So, the questions are:
Upvotes: 0
Views: 1729
Reputation: 2112
In my case I forgot to add <ion-view>
after of <ion-tab>
and before of <ion-content>
.
Like this:
<ion-tabs class="tabs-icon-top tabs-color-balanced">
<ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong">
<ion-view> <!-- here -->
<ion-content class="padding">
<h3>Status</h3>
</ion-content>
</ion-view>
</ion-tab>
<ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" >
<ion-view> <!-- here -->
<ion-content class="padding">
<h3>Chats</h3>
</ion-content>
</ion-view>
</ion-tab>
<ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear">
<ion-view> <!-- here -->
<ion-content class="padding">
<h3>Account</h3>
</ion-content>
</ion-view>
</ion-tab>
</ion-tabs>
Upvotes: 0
Reputation: 7025
So your overall structure is not correct.
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-tabs ng-controller="TabsCtrl" class="tabs-icon-top tabs-color-active-positive">
<ion-tab title="Learn" icon-on="ion-ios-home" icon-off="ion-ios-home-outline">
<ion-nav-view name="home-nav"></ion-nav-view>
</ion-tab>
<ion-tab title="Favorites" icon-on="ion-ios-star" icon-off="ion-ios-star-outline">
<ion-nav-view name="favorite-nav"></ion-nav-view>
</ion-tab>
<ion-tab title="Viewed" icon-on="ion-ios-checkmark" icon-off="ion-ios-checkmark-outline">
<ion-nav-view name="viewed-nav"></ion-nav-view>
</ion-tab>
</ion-tabs>
This codepen shows how to setup your tabs. http://codepen.io/ionic/pen/odqCz
Thats the main issue, the content doesn't know it's inside of a tabs view, so it doesn't know it should resize at all.
Upvotes: 1