How to display a bootstrap dropdown menu within a fixed column.

kron79

Link to test case:
https://codepen.io/cpb79/pen/NWpEZbz

Debugger code (debug.datatables.net):

Error messages shown:

Description of problem:
I have dropdown button within a fixed column on the right hand side of the table (see codepen link). When I trigger the dropdown it sits inside of the table and fixed column. I know this is maybe a css overflow or display issue if anybody could point me in the right direction for a fix on this.

allan

The issue is as you surmise that the FixedColumns container needs to have overflow: scroll. But that means elements inside it can't display outside its boundary.

It looks like you are using Bootstrap 3 and looking at their documentation there is no option to change where the dropdown is inserted into the document.

In Bootstrap 4 you could set the boundary option to window to workaround this.

Allan

kron79

Hi Allan,

Thanks for your response. Unfortunately the application I'm working on is still tied to BS3 with no upgrade planned yet to BS4 or 5 in the near future. I've got the dropdown working as such by adding overflow-x: visible to the .DTFC_RightBodyLiner class but this in turn has created more display bugs in relation to the fixed column. I think the only solution may be to remove the fixed column altogether if there is no other workaround.

Ciaran