multiple-select filter and scrollX css problem
multiple-select filter and scrollX css problem
Hi all !
I use multiple-select (http://wenzhixin.net.cn/p/multiple-select/docs/) filter in my datatables.
I wrote this code to do this :
this.api().columns().every(function ()
{
var column = this;
var select = $('<select multiple="multiple" style="width:inherit"><option value=""></option></select>')
.appendTo($(column.header()).empty())
select.append('<option value="value1">value1</option>')
select.append('<option value="value1">value1</option>')
select.append('<option value="value1">value1</option>')
select.append('<option value="value1">value1</option>')
select.append('<option value="value1">value1</option>')
select.append('<option value="value1">value1</option>')
select.multipleSelect({
});
});
I uploaded picture to : http://postimg.org/image/ys0q3ajxx/ which exactly describes my problem.
Everything is fine and works like a charm.
But problem appears when I use 'scrollX' = true option -> It is needed because I have more than 20 columns to display sometimes !
Problem appears that when I click on this "select" -> the list appears but it is covered by "datatables body rows". This problem does not occur when I use "standard select".
I suppose that this problem is connected with "Css styling", but I do not know how to correct this.
When I turn off "scrollX" option, my multiple-select works fine -> List appears "on the top" of the datatables body, but when "scrollX" is turned on -> this list is covered by "datatables body".
Could you help me how to fix it ?
Answers
you can try out my yadcf plugin, among other features it support scrollX and scrollY , see showcase http://yadcf-showcase.appspot.com/
Hi Daniel,
Thanks for your answer. I very appreciate and glad of your plugin, but I would prefer "my" multiple-select which I described above (wenzhixin), because it looks like "excel" filtering and I need it in my implementation.