Responsive issue on resize (Responsive extension)

kapris

The responsive extension does not work properly. The table becomes responsive when sizing down the browser and shows e.g. only one columns and the plus sign. When maximizing the browser, the table will still show one column and the plus sign. I tested it in IE11, Chrome, FF. Furthermore, from time to time, the table won’t become responsive when restoring down the browser.

Does anyone know a fix or maybe another plugin that works properly?

allan

It appears to work okay for me here: http://datatables.net/extensions/responsive/examples/initialisation/className.html . Does that example not work for you?

Allan

kapris

Well, no it does not work properly.
I mad a small screencast to illustrate:
A link

allan

Thanks for the link! Very odd, I can't explain that as I can't reproduce the error myself. I'll try on another PC later on when I've got another machine available.

Allan

kapris

Thanks Allan

This behavior is for most of the responsive examples. Only the Ajax seems to behave somewhat correct. Not all the time though.

allan

I wonder if the browser is doing something funny about when it triggers a resize event... That's the only thing that springs to mind. Perhaps you could try:

$(window).on( 'resize', function () {
  console.log( 'Resize', $(window).width(), $(window).height() );
} );

in those pages and see if it gives the expected values?

Allan

kapris

I did try and everything is as it should be.
As I mention, this is not specific to my pages. The same behavior is on all the demo on datatables.net on all major browsers.
I'm not a javascript expert, so I will try to find another solution, take a look at other scripts.

Thanks for your time. Really appreciated.

e_lectro

I have seen the same problem as kapris when using Win7 with IE8 and Chrome. Both on my testing tables at work with the FixedColumn plugin within a 100% width container and the example Responsive plugin tables on datatables.net.

It all seems to be tied to the first use of the window maximize button. Subsequent uses redraw the tables correctly. Dragging the window size also works correctly. This is not a problem in OSX.

I have tried numerous scripts that catch the resize event to popup alerts to test that they caught the maximize button resize event. They all work, but when I replace the alerts with datatables fnRedrawLayout nothing happens.

As bad as the Responsive table looks for not returning to the wide mode, FixedColumns looks worse. The 'hidden' fixed columns pop out from under the 'visible' fixed columns and you have two identical columns showing. When you resize the window again they go back to hiding, but try explaining to an end user that they have to maximize their window twice every visit.

Except for this problem, I really like datatables and each version gets better and better :) Thanks!