ion-tabs: content not fitting when changing platform

Question

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:

1. What am I missing for this to work properly in both platforms, and potientially all platforms (i'm thinking Windows Phone), so a solution of ng-if combined with platform = android or ios (or windows phone or god-knows what other platforms there will be in the future) is not generic enough IMHO ???
2. What is the proper generic way to handle this cross-platform with Ionic ?

Answer 1

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>

Answer 2

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.