4

How do I change the style of the accordion headers in ngx-bootstrap?

I tried everything. I copy pasted the code from the documentation for customizing the headers but it does not work. The tag generates a bunch of other tags with classes (mostly bootstrap classes). I get the css path to the heading from the Chrome's Inspector, but I can't change it.

The heading/link is in a <button> tag and even when I say button { color: red !important; } it does not work. I tried everything, but it does not work.

Thanks in advance!

2
  • 1
    have you linked your StyleSheet after the bootsrap or before because this is important?
    – SaboSuke
    Jun 1, 2020 at 11:45
  • Thanks for the reply. I don't actually know, sorry. I use Angular's styleUrls property in the decorator. When I change the styles from the Chrome's inspector it works, so the problem is probably the one you are referring - the bootstrap "overrides" my styles.
    – Nikolai
    Jun 1, 2020 at 12:22

3 Answers 3

5
accordion-group {
  ::ng-deep {
    div {
      &>div.panel-heading.card-header.panel-enabled {
        background-color: rgba(52, 58, 64, 0.15); // change the background of every accordion heading

        .btn-link {
          color: rgb(6, 10, 9); // change the accordion heading buttons style
        }
      }

      &>div.panel-collapse.collapse.in.show>div {
        background-color: hsla(210, 10%, 83%, 0.10); // change the expanded content style
      }
    }
  }

}

::ng-deep{} - that's how you can change the styles of the component that comes from imported library.

The solution I gave is made with SASS (.scss file). I don't know if you can apply changes to the /deep/ components' styles in a regular CSS. If your Angular project is configurated with CSS you can change it to use SASS syntax with the following line:

ng config schematics.@schematics/angular:component.style scss
0
1

You can provide some custom CSS class to the accordion using the panelClass property.

Example

    <accordion>
      <accordion-group heading="Static Header, initially expanded"
                       [panelClass]="customClass"
                       [isOpen]="isFirstOpen">
        This content is straight in the template.
      </accordion-group>
      <accordion-group heading="Content 1">
        <p>accordion 1</p>
      </accordion-group>
      <accordion-group heading="Content 2" panelClass="customClass">
        <p>accordion 2</p>
      </accordion-group>
    </accordion>

Then you need to set the css rules in the global style sheet in you project.

style.css

.card.customClass, .card.customClass .card-header, .panel.customClass {
    background-color: #5bc0de;
    color: #fff;
}

For more information visit the ngx-bootstrap documentation (Accordion Styling).

0

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;}
  1. 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).

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.