Datatables dropdown filter dropdown not responsive

Datatables dropdown filter dropdown not responsive

Noodles12Noodles12 Posts: 107Questions: 38Answers: 2

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>

Answers

Sign In or Register to comment.