CODEWITHSUNDEEP
cssangulartypescriptbootstrap-4ngx-bootstrap
Nikolai
Nikolai

Reputation: 672

Style of accordion-groups' headers (ngx-bootstrap)?

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!

Upvotes: 4

Views: 5012

Answers (4)

Manodip_123
Manodip_123

Reputation: 1

I think this could work perfectly::

SCSS:

accordion-group {
  ::ng-deep {
    .btn:hover {
      background-color: transparent !important;
    }

    .btn {
      color: #0f92d8 !important;
      font-weight: 600 !important;
      outline: none !important;
    }

  }
}

Upvotes: 0

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

Upvotes: 0

Rami Assi
Rami Assi

Reputation: 1129

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).

Upvotes: 1

Nikolai
Nikolai

Reputation: 672

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

Upvotes: 6

Related Questions