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 


Want me to help develop your next project or application?

Contact Us

Specializing in Ruby-on-Rails, Javascript, Multi-Platform Electron Desktop Apps and Hybrid Cordova Mobile Apps.

Recommended Posts