Bootstrap dropdown always hidden behind column (if in fixedColumn)

thegamechangerpro

Hi Guys,
I have orderable turned on in my table so that my users can rearrange their columns at will. I also have fixed columns turned on.

I use bootstrap dropdowns a lot in my solution and sometimes folks want those columns in a fixed column... What do i need to do to get the menu to appear above the fixed column.

This isn't working:

{
  targets: 13,
  className: 'dt-body-right',
  render: function (data, type, row) {
    return '<div class="input-group">' +
      '<input type="text" class="form-control" value="' + data + '">' +
      '<div class="input-group-append">' +
      '<button class="btn btn-default fa-solid fa-caret-down" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="toggleDropdown(this)"></button>' +
      '<div class="dropdown-menu" style="max-height: 200px; overflow-y: auto; z-index: 9999;" aria-labelledby="dropdownMenu2">$$statuses</div>' +
      '</div>' +
      '</div>';
  }
}

I also tried this in my styles:

.dropdown-menu {
    z-index: 1001; 
}

Any help or direction would be GREATLY appreciated!!!

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

allan

I think we'd need a test case showing the issue please. A z-index is what immediately sprung to mind for me as well, but maybe it is a stacking issue.

Allan

kthorngren

That was a fun problem. Checkout this thread. I modified the code at the bottom of the thread and built this test case:
https://live.datatables.net/cufejemu/1/edit

The solution basically sets the z-index of the host cell to 3 when the dropdown is shown.

The querySelectorAll() won't work with Datatables as only the current page is available in the document. I used cells().nodes() to get all the dropdown buttons. Then loop through them with jQuery each() to set the popper config and apply the event handlers.

The CSS tab has this to override the z-index of the fixed column and footer:

td.z-index-3 {
  z-index: 3!important;
}

If you still need help please provide or update my test case so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin