Determation of breakpoints via window.matchMedia

[ujov]

The determation of breakpoints via the width of the window can be different from resposnive viewports. For example, this might happen with a scrollbar in the window. A possible fix would be an update of the _resize function of the dataTables.resposnive.js script.

_resize: function ()
{
...
   // Determine what breakpoint we are currently at
   for ( i=1 ; i < breakpoints.length ; i++ ) {
      if (window.matchMedia("screen and (max-width: " + breakpoints[i].width + "px)" ).matches) {
         breakpoint = breakpoints[i].name;
       }
   }
...
}

[Deleted user]

I don't quite get what you mean by "responsive viewports" I'm afraid. Could you give me a link and instructions on how to reproduce the issue?

[ujov]

Sorry for the misleading explanation.

I hope this fiddle can clarify the issue.

https://jsfiddle.net/qp21kmfy/

The media query defines the same breakpoint as the logic class 'mobile' for the 'Name' (see https://datatables.net/reference/option/responsive.breakpoints). Both rules should be active at width of 480px. If you resize the fiddle you'll recognize that the breakpoint of dataTables is a different one compared to the media query. The 'Name' column apperes earlier as the red background color. This makes the combination of media queries and responsive datatables (especially styling tasks difficult).

[Deleted user]

I'm having problems making the name column appear before the red background when shrinking the size of the window. But when growing it, I can indeed see the problem there. Thanks for letting me know about that. I'm working on a few other things at the moment, but I'll dig into this in detail before the next release of Responsive. Thanks for flagging it up.

[AllanJard]

Gulp - an old one this, sorry!

The display: none approach used here in Responsive 2+. In Responsive 1 the columns where hidden with DataTables column().visible() API, but there needed to be a different way of doing it so columns could be hidden from Responsive as well. I use display: none for Responsive now, so the use of it in the custom CSS isn't going to work.

Going to close. If anyone still has a similar issue, please open a new issue.