small screen not displaying properly

rwgreenwood

Just tarted working with responsive and Foundation 6. WHen I go into phone emulation (from Chrome) , the table does not go into responsive mode. I am comparing to your example here : https://datatables.net/extensions/responsive/examples/styling/foundation.html
and the only difference I can see is that your table ends up with a class of "collapsed" added, mine does not.

I also note that on your example and my table, the search and length at the top doesn't display properly on small screens either.

My table declaration and setup is this:

<table  id="events" class="display responsive nowrap" style="width:100%"> </table>

javascript:
    evtTable = $('#events').DataTable( {
     ...column and ajax stup
      responsive: true,
    "order": [ [0, 'desc']]
   });

I downloaded the most recent version (1.10.18) and included Responsive extension and Foundation styling in my downloads.

Any ideas?

kthorngren

If responsive is not working at all then I would first check to see if you are getting errors in your browser's console. Also make sure you are loading the JS and CSS in the correct order. Beyond that it would be difficult to troubleshoot without seeing it. Can you post a link to your page or a test case replicating the issue?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

I also note that on your example and my table, the search and length at the top doesn't display properly on small screens either.

I'll leave it to @allan or @colin to comment on this question.

Kevin

colin

Hi @rwgreenwood ,

As Kevin said, check the CSS and JS files, that's the only thing I can think of. As you can see in that example you linked to, it does work with those versions, so we'd really need to see the page that's failing to be able to make any diagnosis.

Cheers,

Colin