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

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

kron79kron79 Posts: 4Questions: 2Answers: 0
edited June 2021 in FixedColumns

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.

Answers

  • allanallan Posts: 61,444Questions: 1Answers: 10,053 Site admin

    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

  • kron79kron79 Posts: 4Questions: 2Answers: 0

    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

Sign In or Register to comment.