How do I change the CSS of pills ? (angular2)

Question

I'm using Angular2 and ng-tabset from ng-bootstrap for my first website and managed to make it work so far.

However, I'm stuck now: I can't change the style of pills and they look like this :

but I want them like this :

it looks easy, I just need to display them horizontally and sit a reddish background !

Here is my code:

<ngb-tabset type="pills" orientation="horizontal">
<ngb-tab title="BN™ II">
    <ng-template ngbTabContent>
        <p>first visit</p>
    </ng-template>
</ngb-tab>
<ngb-tab title="BN ProSpec®">
    <ng-template ngbTabContent>
        <p>tab 2</p>
    </ng-template>
</ngb-tab>
<ngb-tab title="IMMAGE®">
    <ng-template ngbTabContent>
        <p>tab 3</p>
    </ng-template>
</ngb-tab>
</ngb-tabset>

I can only change the color of the bullet by adding this to my css file:

ngb-tabset {
    color: orange;
}

I don't have access to the html of the result I want to achieve, it's from a prototype on proto.io unfortunately. — sheep, Sep 01 '17 at 19:03

Naren Murali · Accepted Answer · 2017-09-05T16:14:52.843

0

Update:

Thanks for the website link was able to recreate what you wanted. Add this CSS and it'll work.

Old:

Please find a sample of how to apply the CSS, I tried my best to replicate the image, you can find the styles in style.css inside the Plunkr

Plunkr Demo

CSS:

ul.nav-pills .nav-item {
    display: inline;
}

ul.nav-pills .nav-item > a {
    padding: 4px 35px;
    margin: 4px 5px;
    color: black;
    text-decoration: none;
}

ul.nav-pills .nav-item > a.active {
    background-color: maroon !important;
    color: white;
}

edited Sep 05 '17 at 16:14

answered Sep 01 '17 at 19:50

Naren Murali

19,250
3
27
54

I tried using your css but it doesn't do anything. I inspected my page and ng-tabset already has some css, however editing it doesn't seem to do anything either. Moreover I don't know why `orientation="horizontal"` doesn't work. I hosted my site : https://binding-site-app.firebaseapp.com The tabs are under innovation > efficiency > unrivalled speed – sheep Sep 05 '17 at 14:19
@sheep Thanks for the link, updated my answer with the solution – Naren Murali Sep 05 '17 at 16:15
At first it didn't work. I opened the style editor of Firefox and to my surprised there was a `[_ngcontent-c3]` after each class (for example : `ul.nav-pills[_ngcontent-c3] .nav-item[_ngcontent-c3] {`) so I manually removed it in Firefox and it worked ! Thanks a lot ! This looks exactly like my image. However, I don't how to prevent this `[_ngcontent-c3]` from being added, I need to fix this now. (the temporary fix is to paste it in the styles.css file at the root of my app, it's not edited that way) – sheep Sep 05 '17 at 17:18
@sheep I think there is some CSS file you are missing, that is why you are getting the issue, if I see the DEMOs on the internet they have some styling on them! – Naren Murali Sep 05 '17 at 17:19
Actually, this is my problem : https://stackoverflow.com/questions/36224276/angular2-adding-ngcontent-mav-x-to-styles I did this : https://stackoverflow.com/a/36225709/8549201 fixed ! This is probably because the ngb-tabset is not up to date. Thank you again for your time. – sheep Sep 05 '17 at 17:26

How do I change the CSS of pills ? (angular2)

1 Answers1