DataTables with responsive and Bootstrap Multiselect in the footer

qooob

Hi!

I have an issue with responsive. Any time I have Bootstrap Multiselect in the table's footer, I always get broken table on FIRST LOAD, when responsive is in action. In case I resize (increase width) the page until all of the selects are visible again and responsive goes off, and only then when I make it smaller again - it's working fine as expected.

But it just doesn't want to work on the first boot? What could I do? selects seem to have width: 100% and box-sizing: border-box but still no luck. Any idea?

P.S. Thank you for amazing dataTables!

qooob

Performing the following has no effect:

 $('#example').DataTable()
     .columns.adjust()
     .responsive.recalc();

qooob

Alright, solved it.

It appears that having styling in initComplete(), inside of this.api().columns().every(function () {} was the issue. After all, I got rid of the following and things started to work as expected:

 $(column.footer()).attr('style', 'padding: 4px !important');