NgbAccordion – there is no way to change the default style.

It is not possible to change the style of NgbAccordion, NgbPanel, NgbPanelTitle and NgbPanelContent. e.g. If using ‘type’ is not desirable, there is no way to change the background color or remove the borders without studying the internals of the implementation and hacking up a solution. The API should explicitly support changing all the styles for these elements.

8 thoughts on “NgbAccordion – there is no way to change the default style.

  1. As an example, to customize ngb-accordion background color, I had to dig in its source code and find out that in order to achieve that I had to change the background-color and the border-color of the .card, .card-header and .card-block. These 3 classes are internal to this component and if in some future version of ngb-accordion some other classes are used or simply these are renamed, I am screwed.

    If these classes were officially part of the API, in package.json I’d set the version of ng-bootstrap so that the future versions which break the API will not be downloaded and used. I will consider moving to the new versions if and when I change the app code to match the API change.

    This was just a simple example. If you want to have these components rigid and NOT customizable just close this case and I will have to find other ways. But if you want these components to be of any use to a wider community please help out by finding a reasonable way to make the styling attributes of ngb-accordion (and for that matter the other components of ngb-bootstrap) customizable and protected by API contracts. In the previous comments I suggested what the polymer folks have done but you may have better ideas.

    Thanks in advance.

  2. @bbehzadi How did you even achieve changing the styles by adding custom styles to .card, .card-header, .card-block. I tried to do the same thing but, my custom styles does not show up. All i could see is the default styles.

  3. this is what worked for me in Angular 4. Used this in the component’s css:

    ::ng-deep .card {
      border-radius: 0;
    }
    
    

    what can also work is target the component selector and the divs with a certain class inside it:

    /deep/ ngb-accordion > div.card {
      border-radius: 0;
      }
    

    There doesn’t seem to be other way than using /deep/ ::ng-deep though [would be nicer if it would work without it]
    As the tool is describing a use of Bootstrap 4 with Angular you can surely rely on the classes used by bootstrap [4] without any worries of them being changed?

  4. Maybe it would help to reference in the documentation which Bootstrap classes are used and need to be overwritten?
    ngb-panel will be a card, ngbPanelTitle = card-header and ngbPanelContent = card-body.

    But overwriting wasn’t a problem for me with an own _accordion.scss:

    ngb-accordion {
      .card {
        border: none;
      }
    
      .card-header {
        @extend .h4;
        margin-bottom: 0;
        color: $primary-color;
        background-color: transparent;
      }
    
      .card-body{
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
      }
    }
  5. You need to make your component css file as public from “encapsulation: ViewEncapsulation.None” like
    following. Then it will work.
    @component({
    selector: ‘location-file’,
    templateUrl: ‘./location-file.component.html’,
    styleUrls: [‘./location-file.component.scss’],
    encapsulation: ViewEncapsulation.None
    })

  6. Here’s what has worked with me (using custom sass variables I created) to modify background colors, etc within the accordion:

    ::ng-deep div.card-header:hover {
    background-color: var(–subtle-gray);
    }

    ::ng-deep div.card-header a {
    background-color: var(–accent);
    text-decoration: none !important;
    }

    ::ng-deep div.card-body {
    background-color: var(–subtle-gray);
    }

  7. After reading carefully again through this entire thread I think that we are confusing ng-bootstrap customizability with Bootstrap CSS customizability.

    All ng-bootstrap widgets are based on Bootstrap CSS. This is the contract and it is already documented in the Bootstrap pages. We strictly follow Bootstrap markup and CSS – if there is a discrepancy than it is a bug on our side and we will fix it asap.

    On top of this Bootstrap CSS is already fully customisable as seen in many existing themes – you can create your own Bootstrap CSS theme to suit your needs and ng-bootstrap will be happily working with it as it is using standard Bootstrap CSS and markup.

    I’m going to close this one since I think that we are all covered here. There is still needed work for covering widgets that have their custom (non-Bootstrap) CSS (ex. datepicker) but this will be handled in a separate issue.

    Closing this one for now, if anyone has more precise use-cases that are not covered so far, please open a new issue with a minimal reproduce scenario in a stackblitz.

  8. Why this issue is closed?, still there is not a proper solution provided for writing custom scss for particular component.

    As ng deep will be depricated in future