ngx-bootstrap: Style not working on tabs

I have the following setup:

<tabset>
   <tab customClass="tab-style">
       <template tabHeading>
           Tab1
       </template>
       <div class="tab-page-content">
           <!-- content-->
       </div>
   </tab>
   <tab customClass="tab-style">
       <template tabHeading>
           Tab2
       </template>
       <div class="tab-page-content">
           <!-- content-->
       </div>
   </tab>
<tabset>

And my styling is:

.tab-style {
    background-color: red;
}
// other styling

Now it seems that the customClass “tab-style” is correctly set on the “li” element, but the styling doesn’t seem to work at all.

Picture: http://imgur.com/a/wLk3f

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 20 (2 by maintainers)

Most upvoted comments

this should help: http://valor-software.com/ng2-bootstrap/#/tabs#styling

+26

valorkin on Mar 1, 2017

If you want to overriding bootstrap rule on the component style file, add this on your component

encapsulation: ViewEncapsulation.None

import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'app',
  styleUrls: ['./bootstrap.scss'],
  encapsulation: ViewEncapsulation.None,
  ...
})

https://github.com/gdi2290/angular-starter/wiki/How-to-include-SCSS-in-components

+22

jechazelle on Jan 12, 2018

Hi, @Tommytoe ! If using angular, you need add style.css in .angular-cli.json cli and add you class in style.css. style After you was complete this stage you need add you custom class in tabs component. html Result 😃 result

devfomichov on Jul 23, 2017

I had a same issue, but after reading all of above comments, I was able to work around and resolve my issue. Here is what I have and what I see for this specific component.

I have bootstrap-sass in my project, and I am overriding it.
If I try to override tabs on the component css file or style.scss, it wont work, but when I introduce a new rule like .tab-style { background-color: red; }, it works since there in no bootstrap rule for it.

Workaround:

Since I am overriding bootstrap-sas library in my project to have my personal theme. I created a new _nave.scss where I override bootstrap-sass, and I put all overriding rules in it.

It works! ✨ ps: as a side note: I dont understand why overriding bootstrap rule on the component style file, and style.scss dont answer.

alireza-saberi on Nov 16, 2017

I resolved it like this:

Inside the “.angular-cli.json” under “styles” you have to put “styles.scss” after “bootstrap.css” so it can override the class of bootstrap.

and then you can set the colors of the tabs like this:

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
  color: black;
  background-color: red;
}

.nav-tabs .nav-link, .nav-tabs .nav-item.show .nav-link {
  color: white;
  background-color: blue;
}

ortmann64 on Jan 6, 2018

This is still an issue, should not have to set ViewEncapsulation to None, that will definitely break some other things.

Its caused by the outputted html not having the _ngcontent attribute for the component

<tabset _ngcontent-ahn-19="" class="tabs checkout-tabs tab-container" ng-reflect-justified="true">
    <ul class="nav nav-justified nav-tabs" ng-reflect-klass="nav" ng-reflect-ng-class="[object Object]">
        <li ng-reflect-ng-class="nav-item,tab" class="nav-item tab">
          <a class="nav-link" href="javascript:void(0);">
            <span>Log in</span>
          </a>
        </li>
        <li ng-reflect-ng-class="nav-item," class="nav-item active">
          <a class="nav-link active" href="javascript:void(0);">
            <span>Checkout as Guest</span>
          </a>
        </li>
    </ul>
  </tabset>

The encapsulation for a component always appends that _ng_content to generated css:

.checkout-tabs[_ngcontent-ahn-19] > ul[_ngcontent-ahn-19] > li[_ngcontent-ahn-19] { background: red !important; }

So without the _ngcontent attribute appended to the generated tab elements the CSS won’t match.

Captnwalker1 on Apr 11, 2017

@jechazelle Also works for me. Thanks.

It’s extremely inconvenient to be unable to style tabs as easy as the documentation suggests. Why this isn’t considered a bug?

majorsaaam on Aug 9, 2018

+1 not working… My customclass is adding in both, <li class="nav-item"> and <tab> and it effects in <tab></tab> but not in main <li>.

shurvirmori on Oct 25, 2017

It seems my issue is solved, but I can’t really explain how. I’d read a little more about the CSS encapsulation of Angular2 and decided to test some things. I added ViewEncapsulation.None to my component who’s containing the tabset and it seemed that the styling then worked correctly. But the change broke some other things, so I removed the line again from the component. And to my surprise, the styling kept working. Still my code looks exactly the same as mentioned before.

I’m not sure what has been triggered end why the problem is suddenly fixed. At least it doens’t seem to be a problem with your provided component. Thanks for the help anyways and for providing the Angular components.

jdeblander on Mar 15, 2017

+1 not working

In my case it’d work if the styling are set in the global styles.css file, but not when they’re set inside the component’s own style file. Could be something related to angular’s css encapsulation.

existing issue: #1410

myeung58 on Apr 24, 2017