Toolbar on Android vs iOS

ionic-v1
1

Hi All,

I have a tabbed page

<ion-tabs class="tabs-icon-top tabs-color-active-positive">

   <!-- Friends Tab -->
   <ion-tab title="Friends" icon-off="ion-person-stalker" icon-on="ion-person-stalker" href="#/tab/friends">
     <ion-nav-view name="tab-friends"></ion-nav-view>
   </ion-tab>

  <!-- Offsite Tab  -->
  <ion-tab title="Offsite" icon-off="ion-share" icon-on="ion-share" href="#/tab/offsites">
  <ion-nav-view name="tab-offsites"></ion-nav-view>
  </ion-tab>

  <!-- Cars Tab  -->
  <ion> -tab title="Cars" icon-off="ion-model-s" icon-on="ion-model-s" href="#/tab/cars">
   <ion-nav-view name="tab-cars"></ion-nav-view>
 </ion-tab>

In Safari and on iOS the tab bar appears at the bottom of the screen however on Android it appears on the top of the screen.

This would be acceptable, except I have search bar at the top of the screen in a sub header and on android the tab bar is obscuring the search field anyone got any ideas how I can either

  1. ensure the tab bar is anchored to the bottom of the page
    or

  2. ensure the tab bar does not obscure the search bar .
    page with header code snippet

    Cancel 
    </ion-header-bar>

Regards

Lee