FixedColumn with Bootstrap 5 dropdown overlapping problem

FixedColumn with Bootstrap 5 dropdown overlapping problem

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

Link to test case:
Debugger code ( -
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.


  • colincolin Posts: 14,801Questions: 1Answers: 2,524

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


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

    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: 58,894Questions: 1Answers: 9,479 Site admin


    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.


Sign In or Register to comment.