Need custom Css class option for Dropdown/Datepicker similar to Tooltip

[FirstVertex]

I need to assign a custom Css class to the dropdown of Dropdown and Datepicker. Need similar api to existing tooltipClass option for Tooltip. We are using container="body" for both Dropdown and Datepicker and sometimes we need to assign custom theme coloration to the Dropdown and Datepicker via a Css class.

I also noticed that Modal and Popover already have a similar Css class option.

Thanks!

[FirstVertex]

It could be similar to #2984

[gpolychronis]

@hughanderson4
You can add a custom class on Dropdown. No change is needed on ng-bootstrap side. i.e:

  <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="custom-class">
    <button ngbDropdownItem>Action - 1</button>
    <button ngbDropdownItem>Another Action</button>
    <button ngbDropdownItem>Something else is here</button>
  </div>

and css:

  .custom-class {
      background-color: pink;
  }

[dasco144]

I have a similar issue but I need to override the z-index of the div.dropdown element created on the body to fix an issue where the dropdown is appearing behind the popover that has the drop down toggle.

Is there perhaps another way to target this div.dropdown element on the body to add this z-index?

[azerafati]

I do have a workaround for this until it is implemented.

1. Reference dropdown in the component that is using it

@ViewChild(NgbDropdown)
dropdownElement: NgbDropdown;

2. Put a (openChange)="setDropDownOpenState($event)" on ngbDropdown and :

setDropDownOpenState(isOpen: boolean) {
  if (isOpen) {
    this.dropdownElement._menuElement.nativeElement.parentElement.classList.add('custom-dropdown');
  }
}

[maxokorokov]

Datepicker → #4039

[FirstVertex]

❤️

[DoimoInterlogica]

Action - 1 Another Action Something else is here

This just adds that class to the button that opens the dopdown, not the dropdown itself.