Column filtering conflicting with horizontal scross bar

hermes980

Hi all,

I am trying to use column filtering with a horizontal scroll bar, but it is having rendering issues where once I select my value, it collapses to the point where the scroll bar is hiding the column filter. Any ideas? The example is in an intranet or else I would show it.

Thanks,

K.

dsbrady

I'm running into this same issue, and also can't post a live example.

But, here's what I'm seeing.

The drop-down filters in html that looks something like the following inside of

<

div class="dataTables_scroll">:

<div class="dataTables_scrollBody" style="overflow: auto; width: 100%;">
<table id="transactionsDatatable" class="datatable dataTable" border="0" cellspacing="0" cellpadding="0" role="grid" aria-describedby="transactionsDatatable_info" style="width: 1179px;">
<tfoot>
<tr class="datatableFooter" style="height: 0px;">
<th><select></select></th>
<th><select></select></th>
</tr>
</tfoot>

And the scrollbar code is putting a similar bit of code inside that same "datatTables_scroll" div, but instead it's a separate inner div (class="dataTables_scrollFoot". It's also re-adding the original footer (i.e., with the column names instead of the drop-down filters).

So, what I think is happening is that the scrollbar code initially appends its "footer" (scrollbar plus the footer headings), when you select something in a filter drop-down, the re-draw is completely removing the dropdown filter divs (which may have something to do with the same class name being used).

It looks like anything that causes a re-draw of the datatable (sorting columns, doing the "all-column search" ,etc.) causes this behavior to occur.

hermes980

Maybe we can adjust where it appends too? Anyone else have ideas?