Ionic tabs hidden by nav-bar only in Android

ionic-v1
1

Hi, I’m trying to build an interface with both side menu and tabs. On iOS it works fine, but on Android the tabs are hidden by the nav-bar. Here is one image explaining the issue.

image
ios-android-ionic-tabs.png828×734 10.4 KB

The code for the menu.html template is:

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button class="button-icon ion-arrow-left-c">
      </ion-nav-back-button>
      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-positive">
      <h1 class="title">Menu</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close href="#/menu/home">
          <i class="icon ion-home"></i>
          {{'HomeMenu' | translate}}
        </ion-item>
        <ion-item menu-close href="#/menu/settings">
          <i class="icon ion-ios-gear-outline"></i>
          Settings
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

And the code for the tabbed interface is:

<ion-view view-title="{{'Deals' | translate}}">

  <ion-tabs class="tabs-striped">
    <ion-tab title="{{'FoodCategory' | translate}}" href="#/menu/home/category/food/0">
      <ion-nav-view name="food"></ion-nav-view>
    </ion-tab>
    <ion-tab title="{{'WineCategory' | translate}}" href="#/menu/home/category/wine/1">
      <ion-nav-view name="wine"></ion-nav-view>
    </ion-tab>
  </ion-tabs>

</ion-view>

Thanks for the help!

2

I would check in your $stateProvider.state() section of code. For your tab view state you need to have the following in the configuration to make sure the tab view is going into the right <ion-nav-view>:

views: {
    'menuContent': {
        templateUrl: 'html-file-where-your-tab-view-is'
    }
}

This will make sure when you navigate to your tab view state, it puts the html file inside the named <ion-nav-view name="menuContent">

3

Yes it is already configured like that:

.state('menu.home', {
    url: "/home",
    abstract:  true,
    views: {
      'menuContent': {
        templateUrl: "templates/home.html",
        controller: "HomeCtrl"
      }
    }
  })

home.html is the template with the ion-tabs directive.

4

What do the state configurations look like for your tabs? They would need to look something like this:

.state('menu.home.food', {
    url: '/food',
    views: {
        'food': {
            templateUrl: 'template-file.html'
        }
    }
})
5

The configuration for the two tabs is the following:

.state('menu.home', {
    url: "/home",
    abstract:  true,
    views: {
      'menuContent': {
        templateUrl: "templates/home.html",
        controller: "HomeCtrl"
      }
    }
  })

  .state('menu.home.food', {
    cache: false,
    url: '/category/food/:categoryId',
    views: {
      'food': {
        templateUrl: 'templates/category.html',
        controller: "CategoryCtrl"
      }
    }
  })

  .state('menu.home.wine', {
    cache: false,
    url: '/category/wine/:categoryId',
    views: {
      'wine': {
        templateUrl: 'templates/category.html',
        controller: "CategoryCtrl"
      }
    }
  })

Not sure if this is the best practice, but on iOS it works fine.

6

That is how I had mine set up, the content of the tab view looks like it’s at least positioning itself properly to where the tabs should be.

Did you try removing the class on the <ion-tabs>? Might be a long shot, but maybe some css attribute is affecting them?

Try opening the inspector to have a look at them and see if maybe either your own css styles are affecting them unknowingly or try using the same tabs classes I did: class="tabs-icon-top tabs-positive"

7

I found the same issue and the only way I found to combat the problem is to move the tabs to the bottom. You can do this by adding the following to app.js:

.config(function ($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position("bottom");
})
1 Like
8

@jwt02180 I tried with class="tabs-icon-top tabs-positive" and also with no class attribute, but none of them worked.
@A_Burgess I moved the tabs to the bottom as a temporary solution, but moving them to the bottom will make the app look less native on Android.

9

Sorry to hear that my suggestion didn’t work. I merely suggested that as an option because for me I don’t have a similar issue to yours, so I thought if you tried to mirror my code maybe we would coax out the issue. Wish I could help you more but I’ve only been using ionic for about a month myself. Hope you get it figured out, but for what it’s worth as an iOS user I definitely prefer the tabs on the bottom anyways :stuck_out_tongue:

10

@jwt02180 the strange thing is that I have another ionic project in which the tabs are working on Android, but I cannot spot the difference between that project and this project. Anyway as an Android user I also prefer the tabs on the bottom :wink:

11

Put this code in 2nd line of tabbed interface <ion-tabs class="tabs-striped has-header">. Alternatively check if has-tabs works instead of has-header.

12

I tried both. Neither has-header nor has-tabs works :frowning:

13

Try <ion-content class="tabs has-tabs-top"> This had worked for me.

14

divine : What about that same app on IOS that does not have tabs on the top? I would prefer to have the native feel where Android is on top and IOS on the bottom, however currently I just have both on the bottom to avoid this ‘bug’. :frowning:

15

Check for android version using the inspect element functionality of Developer tools of browser. Your tabs are hiding under the header. check the height of each <div> there, you will be able to fix the issue.

16

I forced the tabs on the bottom for a while, and continued the development of the app. After some time, I removed the $ionicConfigProvider.tabs.position(“bottom”); and the tabs on Android were magically under the header. I don’t know what I’ve done to make them work, but now they works properly on both iOS and Android.

17

I had the same problem.
In index.html it was:

 <ion-nav-bar class="bar-light">
      <ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>

It must be:

<ion-nav-view></ion-nav-view>
2 Likes