why datatable becomes unresponsive (size does not shrink) after adding column filtering..

pmehrotr

I am using datatable 1.10.19, Jquery 3.3.1 and twitter bootstrap 4 (also tried bootstrap 3)/
I noticed that datatable is responsive (.e. its size shring if I reduce browser window) if I do not have any columns with “form” element such as input type”text”, but I need to implement column filtering:
https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html

This adds a new row with input type=”text” to each column.
Are there any solutions so table remains responsive even with column filtering?

kthorngren

According to this thread Responsive doesn't support complex headers which you have with that example.
https://datatables.net/forums/discussion/37194

That thread is a couple years old but still seems to be true. I copied the above code into this example with FixedHeader and Responsive. The table is responsive except for the second header.
http://live.datatables.net/celuvoki/1/edit

One option is to have the column search in the footer:
http://live.datatables.net/mozibigu/1/edit

I suppose its possible to use something like the responsive-resize to determine the hidden columns and manually manipulate the second header to add and remove the search inputs as needed.

Kevin

pmehrotr

Thanks,

I found if I add a wdith parameter to input, it seems to wok, i.e.,
<input type="text" width=100% />

In
https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html
There is no width attribute...

Prem