Ion-tabs selected tab css not working

Ionic Framework ionic-v3
1

Hello,

I am using static ion-tabs, because i don’t need routing since I only have 1 page. I needed to add opacity: 1 to .tabbar at the css to show the ion-tabs, but now the css doesnt work of selected tabs. Is there a solution for this?

<ion-content padding>
  <div #content></div>
  <div>
    <ion-tabs>
      <ion-tab *ngFor="let item of menuItems" tabTitle="{{item?.name}}" tabIcon="home" (ionSelect)="testFunc(item.name)">
      </ion-tab>
    </ion-tabs>
  </div>
</ion-content>

.tabbar {
    opacity: 1 !important;
}
2

in Html :

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

You can oversight css in ionic.app.scss.

.tabs-positive
{
opacity:1;
}

3

It doesn’t work, the color and icon in the tab stay black, doesnt matter if i click on it or not.

4

Hi @woutergoku

try

.tabs .tabbar {
background-color: #fff;
}
or

are you trying to change the color of tab background when active? If that’s the case, please try this:

Add [color]=“variable” inside tag
Add (ionSelect)=“selectContact()” inside where you want to change the background color when active
Add a string variable to store the value of color
Add a function to change the variable. E.g.:
selectContact(){
this.color = “danger”;
}

5

Yeah I meant when active… It’s still not working and I cannot even click any dynamically loaded components or anything. Using static tabs is a thing Ionic doesn’t like apparantely xD

6

.tab-item-active{
background:green!important;
}

or

.tabs .active{
background:red!important;
}

7

@Abdulkhader

I really appreciate your answers, but I guess the whole static tabs(without routing) isn’t working. Nothing seems to be working. Not sure how to fix it.

8

do you want to change the tab icon color or background color ?

1 Like
9

Text and icon color… but I cannot interact with the page using static tabs and it all feels weird, it’s like Ionic doesnt accept static tabs or whatsoever.

10

in variables.scss :

$tabs-md-tab-text-color-active: #ffeeee

$tabs-md-tab-icon-color-active: #ffeeee

11