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…

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;

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 …

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…

[image] mhartington: $ionicConfigProvider - Provider in module ionic - Ionic Framework 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…

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…

.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 $ionicC…

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…

thanks for the answers it helps me a lot.

Thank you for the code :slight_smile:

Ion-tabs on TOP of the screen in Android?

ionic-v1

zenocon January 26, 2015, 1:09am 7

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

Topic		Replies	Views
Android navigation on top? Can't see other navigation	2	1405	April 14, 2015
An issue about tab bar ionic-v1	3	940	January 23, 2015
Content goes under ion-tabs on android ionic-v1	1	895	March 30, 2016
IonTabs is not positioned properly on Android in simulator and real device ionic-v1	2	664	March 26, 2015
Tab icons showing on top ionic-v1	3	1100	December 28, 2014

Ion-tabs on TOP of the screen in Android?

Related topics