Is Responsive extension broken if container is hidden?

orsn

I have div and table inside. First I hide the div with jQuery.hide. Then I initialize the Datatable and call jQuery's show on the div. Now, even if though the window is too small for the table Responsive extension doesn't change the table. When I rescale the window, everything works fine.

Here's the jsFiddle: https://jsfiddle.net/psieniawski/kcyqqay8/
Window must be too small for the table when you run the example.

Is it me, or is it Datatables?

mackmack

Just take a look here: https://datatables.net/extensions/responsive/

$('#myTable').DataTable( {
    responsive: true
} );

You need to add datatable responsive extension.
https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js

and the css file
https://cdn.datatables.net/responsive/2.1.1/css/responsive.dataTables.min.css

mackmack

I visit the link you provided and I see what's wrong in your javascript code..

You must call initialize datatable after showing the container

$("#tableContainer").show();
$('#myTable').DataTable({
   responsive:true,
  data: dataSet
});  

allan

You can actually call the responsive.recalc() method once you've shown your container. That will perform whatever calculations are needed.

Allan

orsn

mackmack, there are js and css added. I also know that everything will work fine if I initialize the table when it's visible. The thing is, I want to set up a few of divs with tables, and show them one by one depending on user activity.

allan, thank you, that worked.