FixedColumn with Bootstrap 5 dropdown overlapping problem

rahmad0813

Link to test case: https://codepen.io/rahmad0813/pen/yLRweYq
Debugger code (debug.datatables.net): -
Error messages shown: -
Description of problem:
I have a problem about my DataTable (using FixedColumns) that have Bootstrap 5 dropdown on the rightmost column that set as fixedcolumn.

The dropdown item is shown under the row after the dropdown itself

If the dropdown item shown on top, it shown over the row above but shown under the row header

I've tried something like changing z-index, position or workaround the dropdown using bootstrap 5 dropdown 'boundary' option, but no luck.
I also doesnt have that much knowledge about CSS.

Any help would be much appreciable. Thank you.

colin

This SO thread may help, I believe it's asking the same issue,

Colin

rahmad0813

Thanks for your reply and Im sorry for my late reply, I've tried the solution in the thread you've mentioned, but unfortunately still not working as expected.
I actually have also tried adding boundary option and overridding 'strategy' in the popperConfig, but still no luck
(these two are updated on the test case)

allan

Hi,

The issue here is that each column in the fixed column has a position: sticky assigned to it in CSS (so it does the "fixed" thing). That creates its own z-index structure and since your popovers are inside each of those elements, they will always be overlapped by the other elements.

There are two fixes I can think of:

1. Move the popover to be a direct decedent of the body tag. That way it will have its own layer context and you can set its z-index to hover over everything on the page.
2. You could set the z-index for the cell that the popover is in to be higher than the others - i.e. use a counter an just increase it each time a button is clicked, setting the z-index for the host cell.

Personally I'd go for option one. It also means that you aren't repeating a whole lot of HTML - you can just reuse the same dropdown for all rows.

Allan

ranjan16031999

below code works form me

const dropdowns = document.querySelectorAll(".dropdown-trigger");

// Initialize all dropdowns with custom configuration

const dropdown = [...dropdowns].map(dropdownToggleEl => {
var instance = new bootstrap.Dropdown(dropdownToggleEl, {
popperConfig(defaultBsPopperConfig) {
return { ...defaultBsPopperConfig, strategy: "fixed" };
},
});

/ /Attach event listeners to the dropdown trigger
dropdownToggleEl.addEventListener("show.bs.dropdown", function (event) {
$(event.target).closest(".table").find(".dtfc-fixed-right").removeClass("z-index-9");
$(event.target).closest("td").addClass("z-index-3");
});

dropdownToggleEl.addEventListener("hide.bs.dropdown", function (event) {
$(event.target).closest("td").removeClass("z-index-3");
});
});

kthorngren

I created a test case using @ranjan16031999 's code.
https://live.datatables.net/cufejemu/1/edit

It uses cells().nodes() to get all the dropdown buttons as querySelectorAll() will only find the nodes on the current page. Datatables removes the remaining rows for performance reasons. It applies this CSS when the dropdown is shown:

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

Kevin

ranjan16031999

Thank you, @kthorngren , for creating a test case using my code! I appreciate your effort in showcasing the solution and making necessary adjustments.