Can't fix header with column filter dropdowns

MySBdatatable

I've got a datatable with a fixed header and column filter dropdowns which extend when hovered. But the dropdowns don't extend as they should. I've traced the problem to scrollY and scrollX in table initialisation. If I remove both scroll commands, the dropdowns work well, but the header is no longer fixed, and I need it to be fixed. I've tried using sScrollXInner and sScrollYInner, which do allow the column filter dropdowns to work, but again, the header is no longer fixed. I've also tried a number of 'z-index' options with 'relative' in CSS, but nothing seems to work. Any help much appreciated
Fiddle: https://jsfiddle.net/5djcocuL/

allan

The div.dataTables_scrollHead element has overflow: hidden; on it which is causing the issue.

div.dataTables_scrollHead {
  overflow: visible !important;
}

should address it, although I'm not certain if there will be any side effects in DataTables.

https://jsfiddle.net/5djcocuL/1/

Allan

MySBdatatable

You Sir are a GENIUS! I can't see any side effects caused. I owe you a drink.

allan

Make it an ale

Allan