table header is not scrolling horizontally with the body

DevTN

Hello, I added select inputs ( bootstrap-select ) under the header table to filter my data.
When I used bootstrap selectpicker, the datatables was hidding the dropdown and the select couldn't pop up. I used
.dataTables_scrollHead { overflow: visible !important; }
and it fixed the pop up, now the select options are not hidden by datatables but it messed up with the header. it's now fixed and doesn't move when scrolling horizontally even I specified "scrollX": true. Only the footer and body are scrolling on X axis.

Any suggestions please what is causing the issue ? Thank you very much.

Here is a demo on jsfiddle https://jsfiddle.net/14jrmyun/

colin

One thing to note here is that you've enable serverSide, so when you filter on the client, you'll only be filtering what's been downloaded, not the entire dataset. Was that intended?

Colin