ScrollX and fixedColumn options hide elements added in header

ScrollX and fixedColumn options hide elements added in header

CaptainNemoCaptainNemo Posts: 13Questions: 6Answers: 1

Hello everyone,
See this test case : https://jsbin.com/hitucal/edit?html,output

As you can see, i set a bootstrap select (an external library) in my header table
Everything is OK with datatables default options. Multiselect is OK and appear above table

However, if you activate "scrollX" and "fixedColumns", you can see that multiselect is under fixed columns.
I try to understand which css rule of Datatables, activated by previous options, overlap my multiselect

Any idea ?

Thanks

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin
    Answer ✓

    The issue is that the header container must have overflow: hidden - otherwise the parts that are out of scroll view would be visible! But the Bootstrap select there is being placed inside that container - thus it also gets cut off.

    What you need is for the dropdown to be attached to the body and then use CSS positioning to put it in the correct location in the document. I've just had a look at the Bootstrap Multiselect options but there doesn't appear to be an option for that. You could perhaps ask in their support channels.

    There is no other workaround for this that I'm aware of.

    Allan

Sign In or Register to comment.