Bootstrap dropdown issue with DataTables

IonutD

Hello,

I have the same problem presented here: http://datatables.net/forums/discussion/16543/datatables-with-bootstrap.-bootstrap-action-dropdowns-are-trapped-inside-datatables-container/p1 and I didn't find any solution to work.

allan

Hi,

So the problem here is that Bootstrap's Javascript will append the element that is used to display the drop down list inside the scrolling container. The scrolling container of course has `overflow: hidden` set on it, since it would be fairly pointless otherwise! Hence the drop down is cut off visually.

The fix would be for Bootstrap to append the drop down to the body tag and position it relative to where it should display on screen. I rather suspect they don't do that because it would be a bit of a nightmare to deal with in terms of keeping the element relative in position to what it is visually attached to when scrolling inner elements (such as the DataTable scrolling container).

There is some discussion about this topic in the Bootstrap issue tracker:

https://github.com/twbs/bootstrap/issues/7160
https://github.com/twbs/bootstrap/issues/5522

I'm afraid that without rewriting the drop down code to append to the body element, there isn't a good solution for this, other than to disable scrolling in DataTables. I don't think its a DataTables bug I'm sorry to say, simply the way the Bootstrap drop down operates.

Is disabling scrolling an option for you?

Regards,
Allan