Datepicker and dropdowns render behind content (accordions a

Topic: Datepicker and dropdowns render behind content (accordions and cards )

cdtuapp pro premium asked 3 years ago

Expected behavior Datepicker selectors ,Selects and dropdowns should render on top of all content of a page and shoud not be tied to the containers body Actual behavior Datepicker selectors and dropdowns do not render on top of the other content in a page especifically inside accordions (although they do not render over any container content as they should ) Resources (screenshots, code snippets etc.)

here you can see that the datepicker doesnt come on top of the content

Arkadiusz Idzikowski staff answered 3 years ago

We are aware of this problem and are already working to solve it. Unfortunately I can't provide an ETA for this fix yet.

Bartosz Termena staff answered 3 years ago

Dear @cdtuapp

The problem arises from overflow: hidden on the .sb-item-body - that is hiding the Datepicker. You can override it like below:

<mdb-accordion [multiple]="false">
  <mdb-accordion-item [collapsed]="false">
    <mdb-accordion-item-head (click)="addClass()"
      >Collapsible Group Item #1</mdb-accordion-item-head
        [placeholder]="'Selected date'"

    <mdb-accordion-item-head (click)="addClass()"
      >Collapsible Group Item #2</mdb-accordion-item-head
      <div class="dropdown" mdbDropdown>
          class="dropdown-toggle waves-light"
          Dropdown primary

        <div class="dropdown-menu dropdown-primary">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
          <a class="dropdown-item" href="#">Something else here</a>

    <mdb-accordion-item-head (click)="addClass()"
      >Collapsible Group Item #3</mdb-accordion-item-head
      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


 public myDatePickerOptions: IMyOptions = {
    // Your options
  constructor(private renderer: Renderer2, private el: ElementRef) {}

  addClass() {
    const elements = this.el.nativeElement.querySelectorAll('.sb-item-body');

    for (const e of elements) {
      this.renderer.removeClass(e, 'overflow-vis');
      setTimeout(() => {
        this.renderer.addClass(e, 'overflow-vis');
      }, 550);


.overflow-vis {
  overflow: visible !important;

Hope it helps!

Best Regards, Bartosz.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 7.5.4
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No