Tabs background color is not grey on Android

ionic-v1
#1

Hi! I have tried to search around the web, but I haven’t found any answer that works.
I am running the tabs app template of ionic.
As you can see in the screenshot, the tabs background is grey on web/iOS, and white on Android.

I have not made any changes of this part of the code.

Version: 1.0.0-beta.9-nightly-274

#2

I’ve got exactly the same problem! Any solutions??

#3

I can confirm this is still a problem on Android, using ionic v1.0.0-beta.13 “lanthanum-leopard”. No matter what CSS I try to use on the tabs, they always appear white on Nexus 5, Android 4.4.4

#4

I figured it out using Chrome Remote Inspector:

Even though I didn’t set it, the tabs-striped class is being automatically applied to the <ion-tabs> element. This appears to be an android-only customization automatically applied by ionic?

I overwrote the CSS for .tabs-striped .tabs and then I was able to set the color properly.

1 Like
#6

Looks like this may be fixed now: https://github.com/driftyco/ionic/commit/b75708ad5caa66c8882d3563292a0d5d47dcaa01

I was able to fix it in beta 13 by adding extra css classes:

<ion-tabs class="tabs-positive tabs-background-positive tabs-color-light" >
#7

adding this to your app.js is better (from Android css issues )

.config(['$ionicTabsConfig', function($ionicTabsConfig) {
// Override the Android platform default to add "tabs-striped" class to "ion-tabs" elements.
$ionicTabsConfig.type = '';
}])
#8

On beta14 you now need to use:

$ionicConfigProvider.tabs.style(standard);