Bootstrap's dropdown hidden by datatables

I got the same problem ! Resolved removing overflow properties in component.css

.table-scrollable {
  width: 100%;
/*  overflow-x: auto;
  overflow-y: hidden;*/
  border: 1px solid #dddddd;
  margin: 10px 0 !important;
}

Or add to your custom.css (called after bootstrap)

.table-scrollable { 
    overflow-x: visible; 
    overflow-y: visible; 
}

This worked for me : Datatable + fixed headers + bootstrap dropdown in header

.dataTables_scrollHead{
    overflow: visible !important;
}

Added to custom css after all others

Ok, after the comments we had, I realized what you want:

You have a <div> element with overflow:auto, and you want that an element inside of that <div> (the <ul> where the menu is), to "escape" from the overflow rule and appear floating, overriding the overflow rule from its ancestor.

But I'm afraid that is not possible. The closest thing you could do is:

• Use javascript to create the <ul> with the menu outside the <div> with overflow:auto, and then use position absolute to set it where it should go, or
• Use javascript to auto scroll at the bottom once that dropdown menu is activated, by adding something like an event listener to the the last dropdown.

The second option seems more elegant and less 'hackish'. (Personally I would just ignore that problem, but if I have to choose, I would go for the second option)