Datatables dropdown filter dropdown not responsive

Noodles12

As the heading suggest, the datatable I created works fine except for the second header where I have dropdown list doesn't collapse in responsive. Please advise.

Here is my code

$(document).ready(function () { var table = $('#myselector').DataTable({ orderCellsTop: true, responsive: true, columnDefs: [ { "targets": [ 4 ], "visible": false } ], initComplete: function () { this.api().columns().every( function () { var column = this; var select = $('') .appendTo( $("#myselector thead tr:eq(1) th").eq(column.index()).empty() ) .on( 'change', function () { var val = $.fn.dataTable.util.escapeRegex( $(this).val() ); column .search( val ? '^'+val+'$' : '', true, false ) .draw(); } ); column.data().unique().sort().each( function ( d, j ) { var val = $('

').html(d).text(); select.append( '' + val + '' ); } ); } ); } } ); });

HTML:

Date	Name	Type	Topic	Hidden
Date	Name	Type	Topic	Hidden
Mango	Mango1	Mango2	Mango3	Mango4
Test	Test1	Test2	Test3	Test4
Apple	apple1	apple2	apple3	apple4
Banana	Banana1	Banana2	Banana3	Banana4

CSS
<style>

myselector select

{
width:100px !important;
}
</style>

kthorngren

See if this thread helps.

Kevin