Topic: Z-index not working for dropdowns

stefangregg priority asked 1 year ago

Hia,I have a dynamic datatable with a dropdown in the last column.

However, the dropdown is underneath the pagination section:enter image description here

This tends to happen when only a few items are in the table.

How can I get this dropdown to be over the datatable pagination since it cuts off access to the other dropdown options?

Please see this snippet:

Adding "z-index: 9999 !important;" to any of the dropdown elements doesn't work!

I using the normal dropdown initialization:

<a id="dropdownMenuLink" data-mdb-toggle="dropdown" aria-expanded="false">Options</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
  <li><a class="dropdown-item">Option 1</a></li>
  <li><a class="dropdown-item">Option 2</a></li>
  <li><a class="dropdown-item">Option 3</a></li>
  <li><a class="dropdown-item">Option 4</a></li>


Mateusz Lazaru staff answered 1 year ago


try to set overflow: true;

stefangregg priority commented 1 year ago

@mlazaru, thanks for the help but it didn't work. Please have a look at this snippet:

This issue only tends to happen when only one item is in the table, is it possible to change the dropdown parent maybe?

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

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.1.0
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: Yes