Bootstrap dropdown issue with DataTables

Bootstrap dropdown issue with DataTables

IonutDIonutD Posts: 1Questions: 0Answers: 0
edited November 2013 in TableTools
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.

Replies

  • allanallan Posts: 57,236Questions: 1Answers: 9,113 Site admin
    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
This discussion has been closed.