DataTables.js Not Resizing Properly. Table Overflows Window Still

I am using dataTables.js from https://datatables.net/ I am also using their responsive extension , but I can not get the table to properly responsively resize. Any insight would b

Solution 1:

I have the same issue, I'm using the jquery DataTables 1.10.7 and the extension Responsive 1.0.6, I solved by adding a line in the "dataTables.responsive.js" in the _resize function, about line 560.

Add the next line at the end of the function:

$(dt.table().node()).removeAttr('style');

That should work.

The function most look like this:

_resize: function() {
  var dt = this.s.dt;
  var width = $(window).width();
  var breakpoints = this.c.breakpoints;
  var breakpoint = breakpoints[0].name;
  var columns = this.s.columns;
  var i, ien;

  // Determine what breakpoint we are currently at
  for (i = breakpoints.length - 1; i >= 0; i--) {
    if (width <= breakpoints[i].width) {
      breakpoint = breakpoints[i].name;
      break;
    }
  }

  // Show the columns for that break point
  var columnsVis = this._columnsVisiblity(breakpoint);

  // Set the class before the column visibility is changed so event
  // listeners know what the state is. Need to determine if there are
  // any columns that are not visible but can be shown
  var collapsedClass = false;
  for (i = 0, ien = columns.length; i < ien; i++) {
    if (columnsVis[i] === false && !columns[i].never) {
      collapsedClass = true;
      break;
    }
  }

  $(dt.table().node()).toggleClass('collapsed', collapsedClass);

  dt.columns().eq(0).each(function(colIdx, i) {
    dt.column(colIdx).visible(columnsVis[i]);
  });

  $(dt.table().node()).removeAttr('style');
},

Best regards.