Ionic

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

Posted by Weston Ganger on June 02, 2016

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:


Posted in Ionic and Tagged with ionic cordova 


Need help on your next project or application?

I specialize in Ruby-on-Rails, AngularJS, Javascript, Bootstrap, and Hybrid Mobile Apps with Cordova & Ionic.

Contact Me

Recommended Posts