Ion-tabs on TOP of the screen in Android?

ionic-v1
1

Probably a really simple missing CSS attribute or something, but when I built and tested my app on the browser (Chrome) and on an iPhone, the tab bar is at the bottom of the screen as expected. However, on an Android device, the tab bar appear at the TOP of the screen, just under the Navigation bar !!

Works perfectly - just the positioning is odd. Not sure why it is doing this on Android specifically?

<ion-tabs class="tabs-icon-top tabs-dark">
  <ion-tab title="Home" icon-off="ion-ios7-home-outline" icon-on="ion-ios7-home" href="#/tab/dash">
    <ion-nav-view name="tab-dash"></ion-nav-view>
  </ion-tab>
  <ion-tab title="Games" icon-off="ion-ios7-browsers-outline" icon-on="ion-ios7-browsers" href="#/tab/games">
    <ion-nav-view name="tab-games"></ion-nav-view>
  </ion-tab>
  <ion-tab title="Notices" icon-off="ion-ios7-bell-outline" icon-on="ion-ios7-bell" href="#/tab/notices" badge="noticeCounter" badge-style="badge-light">
    <ion-nav-view name="tab-notices"></ion-nav-view>
  </ion-tab>
  <ion-tab title="Account" icon-off="ion-ios7-gear-outline" icon-on="ion-ios7-gear" href="#/tab/account">
    <ion-nav-view name="tab-account"></ion-nav-view>
  </ion-tab>
</ion-tabs>
2

its a very nice style that ionic put in the new beta for more native look for tabs :smile: .
you .
please read this
http://ionicframework.com/docs/api/provider/$ionicConfigProvider/
in the tabs.position(value) section and adjust it how you want;

6 Likes
3

Ha! Thank you @ItamarCohen for this. I knew it would be something simple. I was fairly sure it was not a bug as everything worked perfectly except for the position.

More confusion because my past 2 Ionic projects last month didnā€™t have this issue, but they were with Beta 13, and I upgraded to 14 this weekā€¦ :smile:

1 Like
4

Just to chime in on this a bitā€¦
This is part of our platform specific changes for beta 14.
In order to make apps feel more at home to their native counter parts, weā€™ve changed a few things base on ios or android.

While we think this is the way to go, it is all configurable.

@ItamarCohen provided a link to all the configurable option you could have.

1 Like
5

Heya, after experiencing the same issue, Iā€™m ok with it being on top for Android, except it destroys my subheader. How can I resolve this?

index.html

 <body ng-app="starter">

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

    <ion-nav-view></ion-nav-view>

  </body>

tabs.html

<ion-tabs class="tabs-icon-top tabs-color-active-positive">

  <ion-tab title="Dashboard" icon-off="ion-podium" icon-on="ion-podium" href="#/tab/dash">
    <ion-nav-view name="tab-dash"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Alerts" icon-off="ion-ios7-bell-outline" icon-on="ion-ios7-bell" href="#/tab/alerts">
    <ion-nav-view name="tab-alerts"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Sign-Out" icon="ion-log-out" ng-click="signout()">
  </ion-tab>

</ion-tabs>

tab-dash.html

<ion-view view-title="Dashboard">

  <ion-nav-buttons side="right">
    <button class="button button-positive icon-right ion-chevron-right" ng-click="filter()">
    Filter
    </button>
  </ion-nav-buttons>

  <!-- this subheader is presumably behind the ion-tab widget now in Android -->
  <ion-header-bar class="bar-subheader bar-positive">
     <h2 class="title">{{location.name}}</h2>
  </ion-header-bar>

  <ion-content class="padding">

  etc...
6

Like most, I have decided to leave the Android tab bar on the top, in order to preserve platform specific habits, however I have an issue similar to @zenocon above.

On my home tab, I have disabled the display of the header bar altogether. Works great in iOS, but on Android, it leaves an ugly white space at the top of the screen, then the tab bar, then the page content.

Any way to remove the empty header space?

7

The CSS in this thread seems to resolve my issue for now. YMMV.

8

.config(function($ionicConfigProvider) {
$ionicConfigProvider.backButton.text(ā€˜Go Backā€™).icon(ā€˜ion-chevron-leftā€™);
$ionicConfigProvider.navBar.alignTitle(ā€œcenterā€); //Places them at the bottom for all OS
$ionicConfigProvider.tabs.position(ā€œbottomā€); //Places them at the bottom for all OS
$ionicConfigProvider.tabs.style(ā€œstandardā€); //Makes them all look the same across all OS
})

this will put the tabs in the bottom for android

$ionicConfigProvider.tabs.position(ā€œbottomā€); //Places them at the bottom for all OS

3 Likes
9

Hope this helps a few people.

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) { 
      $ionicConfigProvider.tabs.position('bottom'); 
    
      $stateProvider
      
        .state('tab', {
        url: "/tab",
        abstract: true,
        templateUrl: "templates/tabs.html"
      })
6 Likes
10

thanks for the answers it helps me a lot.

11

Thank you for the code :slight_smile:

12

Helpful example, Thank you!

13

i have this problem too ,but i dont know how config this with angular codes,plz help me, sorry for i cant speak english very well:sweat_smile:

14

Thank you u so much for your helps