FixedColumn with Bootstrap 5 dropdown overlapping problem

FixedColumn with Bootstrap 5 dropdown overlapping problem

rahmad0813rahmad0813 Posts: 2Questions: 1Answers: 0
edited May 2023 in Free community support

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.

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

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

    Colin

  • rahmad0813rahmad0813 Posts: 2Questions: 1Answers: 0
    edited May 2023

    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)

  • allanallan Posts: 63,676Questions: 1Answers: 10,497 Site admin

    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

  • ranjan16031999ranjan16031999 Posts: 4Questions: 0Answers: 2
    edited October 2023

    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");
    });
    });

  • kthorngrenkthorngren Posts: 21,443Questions: 26Answers: 4,974

    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

  • ranjan16031999ranjan16031999 Posts: 4Questions: 0Answers: 2

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

  • DystDyst Posts: 9Questions: 3Answers: 0
    edited December 12

    Hi, I created an alternative solution when using the render function to make the dropdown. I will share it here as it might help others in the future. :smile:

            $('#TableName').on('shown.bs.dropdown', '.dropdown', function () {
                $(this).closest('td').addClass('z-index-3');
            });
    
            $('#TableName').on('hidden.bs.dropdown', '.dropdown', function () {
    
                $(this).closest('td').removeClass('z-index-3');
            });
    
  • allanallan Posts: 63,676Questions: 1Answers: 10,497 Site admin

    Thank you for sharing!

    Allan

Sign In or Register to comment.