dataTables.js not resizing properly. Table overflo

Question

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 be grand.

The table overflows the window.

If you expand it all the way out so all the columns are shown, it doesn't even start hiding columns until the 3rd column is off screen

I have created a jsfiddle with my code.

$(document).ready(function() {
  // Setup - add a text input to each footer cell
  $('#Table_Assets tfoot th').each(function() {
    var title = $('#Table_Assets thead th').eq($(this).index()).text();
    $(this).html('<input type="text" style="max-width:80px;" />');
  });

  // DataTable
  var table = $('#Table_Assets').DataTable({
    responsive: true,
    "autoWidth": false,
    "order": [
      [13, "desc"]
    ],
    initComplete: function() {
      var r = $('#Table_Assets tfoot tr');
      r.find('th').each(function() {
        $(this).css('padding', 8);
      });
      $('#Table_Assets thead').append(r);
      $('#search_0').css('text-align', 'center');
    },
  });

  $('#Table_Assets').resize()

  // Apply the search
  table.columns().every(function() {
    var that = this;

    $('input', this.footer()).on('keyup change', function() {
      that.search(this.value)
        .draw();
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.6/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js" type="text/javascript"></script>
<link href="https://cdn.datatables.net/responsive/1.0.6/css/dataTables.responsive.css" rel="stylesheet">
<script src="https://cdn.datatables.net/responsive/1.0.6/js/dataTables.responsive.js" type="text/javascript"></script>

<div style="max-width:100%; margin-left:auto; margin-right:auto; background-color:#c4bcbc; border-radius:15px; padding:10px; color:black" class="center">
  <table id="Table_Assets" class="outerroundedborder dt-responsive" style="width:auto; margin-bottom: 15px; margin-left:auto; margin-right:auto">
    <thead>
      <tr style="white-space:nowrap;">
        <th scope="col">Name:</th>
        <th scope="col">Type:</th>
        <th scope="col">Manufacturer</th>
        <th scope="col">Supplier</th>
        <th scope="col">Quantity</th>
        <th scope="col">Serial Number</th>
        <th scope="col">Location:</th>
        <th scope="col">Comments</th>
        <th scope="col">Computer Name</th>
        <th scope="col">Room Number</th>
        <th scope="col">Active</th>
        <th scope="col">Tech Fee</th>
        <th scope="col">Specifications</th>
        <th scope="col">Deploy Date</th>
        <th scope="col">User</th>
        <th scope="col">Department</th>
        <th scope="col">Building</th>
        <th scope="col">Tickets</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="width:auto;">Doom DOOM!</td>
        <td>Laptop</td>
        <td>HP</td>
        <td>none</td>
        <td>33</td>
        <td>sdfg</td>
        <td>sdfg</td>
        <td>dfhgdfh</td>
        <td>Nebulus</td>
        <td>2345</td>
        <td>True</td>
        <td>True</td>
        <td>Stuff from space</td>
        <td>5/30/2015</td>
        <td>Michaels | Joey</td>
        <td>Staff</td>
        <td></td>
        <td>
          <br />
          <div class="grey">No tickets found</div>
        </td>
      </tr>
      <tr>
        <td style="width:auto;">Dr. Von Doom</td>
        <td>Laptop</td>
        <td>HP</td>
        <td>none</td>
        <td>0</td>
        <td>123412341234</td>
        <td>Dr. Doom&#39;s Lair</td>
        <td></td>
        <td>Spiderman</td>
        <td>42</td>
        <td>True</td>
        <td></td>
        <td>Spidey sense is tingling. ^_^</td>
        <td>6/18/2015</td>
        <td>Michaels | Joey</td>
        <td>Staff</td>
        <td>AIC Faculty</td>
        <td>
          <br />
          <div class="grey">No tickets found</div>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr class="sortbottom">
        <th scope="col">Name:</th>
        <th scope="col">Type:</th>
        <th scope="col">Manufacturer</th>
        <th scope="col">Supplier</th>
        <th scope="col">Quantity</th>
        <th scope="col">Serial Number</th>
        <th scope="col">Location:</th>
        <th scope="col">Comments</th>
        <th scope="col">Computer Name</th>
        <th scope="col">Room Number</th>
        <th scope="col">Active</th>
        <th scope="col">Tech Fee</th>
        <th scope="col">Specifications</th>
        <th scope="col">Deploy Date</th>
        <th scope="col">User</th>
        <th scope="col">Department</th>
        <th scope="col">Building</th>
        <th scope="col">Tickets</th>
      </tr>
    </tfoot>
  </table>
</div>

Answer 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.