CODEWITHSUNDEEP
cssangularng2-bootstrap
Pein
Pein

Reputation: 443

how to override ng2-boostrap accordion default style with custom css style in angular

I am trying to override the ng2-bootstrap accordion css style with custom style but the style is not getting applied

enter image description here

Html

<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
  <ngb-panel class="customclass1" title="Simple">
    <ng-template ngbPanelContent>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
      aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
      sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
      craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
      occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
      labore sustainable VHS.
    </ng-template>
  </ngb-panel>
</ngb-accordion>

styles.css

.customclass1{
    background-color: yellow!important;
}

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Charts</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <app-root></app-root>
</body>
</html>

angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "charts"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

I am trying to change the background color and the style is not getting applied.can anyone let me know how can i override the default styles of the ng2-bootstrap accordion

Upvotes: 3

Views: 4450

Answers (3)

Shbenzer
Shbenzer

Reputation: 51

Just dealt with this issue after upgrading to most recent versions of angular, bootstrap, etc. and I want to provide a more detailed answer.

My experience is that there's really two main ways to do it

1. using the [panelClass] attribute and then supplanting the existing styling in the accordion component and its children.

This way is more finicky and will likely take a lot more trial and error to configure to your desired specs.

html:

<accordion>
    <accordion-group heading="test" [panelClass]="'custom-class'"></accordion-group>
    <accordion-group heading="test2" [panelClass]="'custom-class'"></accordion-group>
</accordion>

note the extra set of quotation marks in the [panelClass] - Angular looks for presets otherwise. You can get around this by initializing a string variable that contains the name of the custom class you desire and popping that in there, instead.

possible css (might not be precise):

accordion-group::ng-deep .custom-class>a{background-color: black !important;}
accordion-group::ng-deep .custom-class>a:hover{color:white !important;}

2. Track down the specific classes the components utilize (your web browser's developer tools are useful) and use the usual css specs (::ng-deep, !important, '>', etc.), as necessary. In the accordion-group, for example, the headings for accordion-groups utilize .btn, .btn-link, etc.

E.g., if you wanted to change the default underlines in an accordion-group's heading to only display on the (hover) event:

html:

<accordion>
    <accordion-group heading="test" id="blah"></accordion-group>
    <accordion-group heading="test2"></accordion-group>
</accordion>

css:

#blah .btn{text-decoration: none;}
#blah .btn:hover{text-decoration: underline;}

I find method #2 to be simpler, it just requires a little investigation into the components you use (probably not a bad thing anyway).

Upvotes: 4

Camilo Casadiego
Camilo Casadiego

Reputation: 918

In case anyone else stumbles with this issue, the right way with latest angular versions is

ngb-accordion::ng-deep

Using the actual tags and other deep calls, you can change any css attribute of the accordion, for example:

ngb-accordion::ng-deep.card::ng-deep
  .btn
    color: #666666
    text-align: center
    font-weight: 800
    font-size: x-large
  span
    font-size: 1.2rem
    color: #666666

gives me this:

Atiled accordion

Upvotes: 2

Mukyuu
Mukyuu

Reputation: 6759

The way to do it is not by adding a class on <ngb-panel class="customclass1" title="Simple"> and then adding a css rule such as: 

.customclass1{
  background-color: yellow!important;
}

You would have a better time adding a css rule by:

ngb-accordion /deep/ .card /deep/ [role=tab]{
     background-color: yellow;
}

ngb-accordion /deep/ .card /deep/ [role=tab]#\31 -header{
     background-color: red !important;
}

By then you would be able to customize the tab according to the id: enter image description here

Check the following plnkr and notice the difference between src/accordion-basic.html and src/accordion-basic.css for the styling using id:

http://plnkr.co/edit/x9dXjkF4bPDIgiGHeYFK?p=preview

http://plnkr.co/edit/izfDn4MO3QSjja8mBqq7?p=preview

Notice the /deep/ it was deprecated altogether with >>> and ::ng-deep:: but you would be able to use it until they're removed.

Upvotes: 6

Related Questions