IonTabs is not positioned properly on Android in simulator and real device

ionic-v1
#1

Hi,

I’ve made a simple tabbed layout:

<ion-tabs class="tabs-positive">
	<ion-tab icon="ion-home" ui-sref="home">
		<ion-nav-view name="home"></ion-nav-view>
	</ion-tab>
	<ion-tab icon="ion-person" ui-sref="profile">
		<ion-nav-view name="profile">
		</ion-nav-view>
	</ion-tab>
	<ion-tab icon="icon-cashier" ui-sref="bets">
		<ion-nav-view name="bets"></ion-nav-view>
	</ion-tab>
	<ion-tab icon="ion-search" ui-sref="search">
		<ion-nav-view name="search"></ion-nav-view>
	</ion-tab>
	<ion-tab icon="icon-messages" ui-sref="messages">
		<ion-nav-view name="messages"></ion-nav-view>
	</ion-tab>

	<ion-tab icon="ion-navicon-round" ui-sref="menu">
		<ion-nav-view name="menu"></ion-nav-view>
	</ion-tab>
</ion-tabs>

View HTML:

<ion-view title="Home">
  <ion-content padding="true">
	<h2>Home Page</h2>
	<p>Here's the main route for the app.</p>
  </ion-content>
</ion-view>

On iOS tests everything looks great, but for all android devices via simulator, real device or chrome debugging it looks broken for no particular reason, i have no CSS applied yet aside from stock coming with Ionic.

Tabs should be placed at the bottom. I’ve heard it might be android specific “feature”? Though I wish it will all look the same for all platforms.

Any ideas why Android breaks the things? I was hoping to build for both platforms without CSS issues :blush:

EDIT:

I’ve found that this is a default feature of Android.

Tried to add this to my main app.js file:

angular.module('sportcial', ['ionic'])
.config(function config($ionicConfigProvider) {
	$ionicConfigProvider.tabs.position('bottom')
}) 
.run(function($ionicPlatform) {

With no luck :slight_smile:

#2

Try adding it to an already existing .config.
I tested this out and it worked fine for me

#3

Yeah, it worked only in a controller for me at first, but then I took out all my cofigs into a separate file to split the logic and it works now. Sorry for confusion.