title: ion-tabs: content not fitting when changing platform
body: <p>This is how the app is structured in terms of ionic directives.  </p>
  
  <p>Below is the index.html body html:
      </p>
  
  <pre><code>&lt;ion-nav-bar class="bar-positive"&gt;
    &lt;ion-nav-back-button&gt;
    &lt;/ion-nav-back-button&gt;        
  &lt;/ion-nav-bar&gt;     
  
  &lt;ion-nav-view&gt;&lt;/ion-nav-view&gt; 
  
  &lt;ion-tabs ng-controller="TabsCtrl" class="tabs-icon-top tabs-color-active-positive"&gt;
  
    &lt;!-- Main list Tab - includes favorites and viewed videos --&gt;
    &lt;ion-tab title="Learn" icon-on="ion-ios-home" icon-off="ion-ios-home-outline" ng-click="setAsHome()"&gt;
    &lt;/ion-tab&gt;
  
    &lt;!-- Favorite videos Tab --&gt;
    &lt;ion-tab title="Favorites" icon-on="ion-ios-star" icon-off="ion-ios-star-outline" ng-click="setAsFavorite()"&gt;
    &lt;/ion-tab&gt;
  
    &lt;!-- Viewed videos Tab --&gt;
    &lt;ion-tab title="Viewed" icon-on="ion-ios-checkmark" icon-off="ion-ios-checkmark-outline" ng-click="setAsViewed()"&gt;
    &lt;/ion-tab&gt;
  
  &lt;/ion-tabs&gt;    
  </code></pre>
  
  <p></p>
  
  <p>then, the content of the ion-view comes from the file list.html, and it's html is as follows:</p>
  
  <pre><code>&lt;ion-view title="Showing {{filtered.length}} videos"&gt;
    &lt;ion-nav-buttons side="right"&gt;
        &lt;a ng-click="openSearchModal()" class="button button-icon icon ion-search"&gt;&lt;/a&gt; 
    &lt;/ion-nav-buttons&gt;      
    &lt;ion-content class="has-tabs"&gt;
        &lt;ion-list&gt;
        &lt;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"&gt;
          &lt;div class="row"&gt;
            &lt;h3 class="col cat"&gt;{{video.cat}}&lt;/h3&gt;
            &lt;span class="col platform"&gt;{{video.platform | formatPlatform}}
            &lt;/span&gt; 
          &lt;/div&gt;   
          &lt;div class="row"&gt;
            &lt;h4 class="col col-100 title"&gt;{{video.title}}&lt;/h4&gt;
          &lt;/div&gt; 
          &lt;div class="row"&gt;
            &lt;p class="col description"&gt;{{video.desc}}&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
            &lt;span class="col year"&gt;session {{video.session}}, in &lt;span&gt;{{video.year}}&lt;/span&gt;&lt;/span&gt;
          &lt;/div&gt;                             
          &lt;i class="icon ion-chevron-right"&gt;&lt;/i&gt;
        &lt;/a&gt;
      &lt;/ion-list&gt;
    &lt;/ion-content&gt;  
  &lt;/ion-view&gt;
  </code></pre>
  
  <p>Here, i wish to emphasize on that:</p>
  
  <pre><code>&lt;ion-content class="has-tabs"&gt;
  </code></pre>
  
  <p>Notice that the <strong>ion-content</strong> directive has the <strong>has-tabs</strong> class.</p>
  
  <p>When running this on <strong>iOS</strong>, 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:</p>
  
  <p><a href="https://i.stack.imgur.com/X2SYI.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X2SYI.jpg" alt="enter image description here"></a></p>
  
  <p><strong>Now comes the series of problem I've encountered.</strong>  </p>
  
  <p>When I launch the same code on <strong>android</strong>, 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. <strong>Look at the last row's chevron, it is cut off.</strong></p>
  
  <p><a href="https://i.stack.imgur.com/gcaMB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gcaMB.jpg" alt="enter image description here"></a></p>
  
  <p>So, i tried removing the <strong>has-tabs</strong> class, thinking that <strong>ionic</strong> would probably handle this automatically, according to the platform, <strong>but content still does not fit properly</strong>.</p>
  
  <p>Here are the <strong>iOS</strong> and <strong>android</strong> screenshot without the <strong>has-tabs</strong> class.  <strong>Please note that in both screenshots below, the list is scrolled all the way to the top</strong></p>
  
  <p><strong>iOS</strong>: the navbar overlaps with the very top row !</p>
  
  <p><a href="https://i.stack.imgur.com/Wbiyb.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Wbiyb.jpg" alt="enter image description here"></a></p>
  
  <p><strong>android</strong>: the navbar overlaps with the very top row !</p>
  
  <p><a href="https://i.stack.imgur.com/TRygX.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TRygX.jpg" alt="enter image description here"></a></p>
  
  <p><strong>So, the questions are:</strong></p>
  
  <ol>
  <li>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 <strong>ng-if</strong> 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 ???  </li>
  <li>What is the proper generic way to handle this cross-platform with Ionic ?</li>
  </ol>