Unable to get custom filter UI to present. (1.12.1)

khaos

Non-working datatable implementation:
http://jsfiddle.net/Cyberjetx/hgvtqxux/45/

Example of what works on a regular table:
http://jsfiddle.net/Cyberjetx/st1vf2yz/7/

Debugger code:
https://debug.datatables.net/otuxul

Error messages shown:
No error just hidden portion of UI

Description of problem:
Attempting to create a UI element similar to dropdown behavior the dropdown portion is hidden behind the rows in tbody. I have tried so many combinations of early and late bound css position settings. The two results are either the dropped down portion is hidden or pushes the table down because the header height is increased to accommodate.

fysa- This is not a break due to the upgrade. This did not work in the previous version either.

I know this is on the edge of what I could/should ask as I feel this is a css issue, but, I'm stuck all the same.

allan

It is due to the fact that you have scrolling enable and the inserted element is being added to the header. The header is inside a div which has overflow: hidden - otherwise it wouldn't be able to hide the parts that should be hidden by the scrolling.

The only way to overcome what you are seeing to to append to elements to the DataTable container (or something higher up in the document) - table().container(), and then position the elements to appear correctly.

It is a pain this, but the scrolling adds a lot of issues like this. Another option you might consider is disabling scrolling and using FixedHeader instead.

Allan

khaos

Thanks Allan. My thanks. Understanding the why will help me resolve the issue.