Fix Ion-tabs Overlapping Content On Android & Ionic 1.x

Posted by Weston Ganger

In my Ionic app I was having trouble with the Android tabs on the top because the tabs were overlapping my ion-content. There are two solutions to this.

Solution 1, the correct way to fix this is to conditionally apply a class to your ion-content if the device is Android.


/* www/js/app.js */
.app(function(){
  $rootScope.android = ionic.Platform.isAndroid();
})

Then make sure you inject $rootScope into all of your controllers and in your view do this:


<ion-content ng-class="{'has-tabs-top': $root.android}">

OR

Solution 2 is for if you want something easier and that matches the IOS app as well then just move your tabs to the bottom by adding this line to your apps config function instead


/* www/js/app.js */
.config(function($ionicConfigProvider){
  $ionicConfigProvider.platform.android.tabs.position("bottom");
})


Related External Links:

Article Topic:Software Development - Ionic

Date:June 02, 2016

Recommended Posts