Ion-tabs overlapping content on android devices

ionic-v1
1

I’m using ion-tabs to display four tabs. Unfortunately, using these will overlap the content on android devices.

I didn’t use the ion-tabs in ion-content and I added a class with has-header to the ion-content, as described in the docs.

You can see a CodePen here.

The uncommented lines that will produce native android tabs are overlapping the content.
Please see the attached image.

image
ion-tabs.jpg2262×1006 407 KB

How can I solve this issue?

2

how about add class attribute in ion-content

<ion-content class="has-tabs-top">
3

This will solve the problem for Android devices but will then also add unwanted spacing for ios as well - is it possible to only set has-tabs-top for android devices?

UPDATE: I think I solved it. After adding a ng-controller on a parent element (like ion-pane) and defining the scope (like this:

var bspApp = angular.module('bspApp', ['ionic']);

bspApp.controller('TestCtrl', function($scope) {
    $scope.platform = ionic.Platform;
});

)

I was then able to set platform-specific attributes:

<ion-content ng-class="{'has-header has-tabs-top': platform.isAndroid(), 'has-header': !platform.isAndroid()}">

However, I’m not sure if this is the right approach since that would mean to (re)define every single element that may differ in its layout.

4

I Also encountered this bug…would be nice to know the solution…

5

I solved this problem with pure scss like this:

 .platform-android {
  .tabs-content {
    @extend .has-tabs-top;
  }
}

.platform-ios {
  .tabs-content {
    @extend .has-tabs;
  }
}

Then use content tag

<ion-content class="tabs-content"></ion-content>
3 Likes
6

Encountered the same issue: fixed it by adding a header bar to each tab, it will not be visible as overriden by the main app header bar, but it will nicely fix the issue both under iOS and Android.

7

I ran into the same thing with Android. This fixed it for me, by adding this in app.js

.config(function($ionicConfigProvider) {
  $ionicConfigProvider.platform.android.tabs.position("bottom");
 })

Docs explain it better than I can, but android puts tabs by default up top, and ios on bottom, $ionicConfigProvider

1 Like
8

I use ng-class condition in each ion-content I have. And it works for me

<ion-content ng-class="{'has-tabs-top': platform.isAndroid()}" class="has-header">

and you need to define the platform term in EACH of your controllers:

$scope.platform = ionic.Platform;
9

Has anyone found a better solution to this? Using SASS and modifying each individual content tag seems like a lot of trouble for something that shouldn’t happen in the first place, and using a controller just to apply platform specific CSS seems like a hack. Is this a bug that’s being worked on, or desired behavior?

1 Like
10

Best Answer. Thanks for the trick.