Unable to get custom filter UI to present. (1.12.1)
Unable to get custom filter UI to present. (1.12.1)
khaos
Posts: 47Questions: 11Answers: 0
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. 
This question has an accepted answers - jump to answer
Answers
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
divwhich hasoverflow: 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
Thanks Allan. My thanks. Understanding the why will help me resolve the issue.