title: JQuery Datatables overflow
body: <p>I have settled my datables within a tabbed container, If the table is too long, it overflows. The following code resizes the columns when i change tabs:</p>
  
  <pre><code>$('#tmTabs').tabs( {
      "show": function(event, ui) {
  
          var oTable = $('div.dataTables_scrollBody&gt;table.display', ui.panel).dataTable();
          if ( oTable.length &gt; 0 ) {
              oTable.fnAdjustColumnSizing();
          }
      }
  } );
  </code></pre>
  
  <p>but, is a bit taxing on processing time and this current code only works when you change the tab.  The table overflows, when any operation is called on it, that being sorting, adding a row, or filtering etc.</p>
  
  <p>Heres a screenshot of the overflow, you can see on the right side, as pointed by the arrow (just blanked out the data with white boxes, so dont worry about those):</p>
  
  <p><img src="https://i.stack.imgur.com/4kvIJ.jpg" alt="data tables overflows right-side"></p>
  
  <p>If necessary, heres the rest of my code to create the dataTables (i am also using the editable plugin):</p>
  
  <pre><code>$('.dataTable').each(function(){ 
      //get ID of current table;
      tblID = $(this).attr("id");
      var pattern = "[0-9]+";
      $tblIDNum = tblID.match(pattern);
  
      //transform this table into a data table
      $(this).dataTable({ 
          "sScrollY": "600px",
          "bScrollCollapse": true,
          "bPaginate": false,
          "bJQueryUI": true,
          "aoColumnDefs": [
              { "sWidth": "10%", "aTargets": [ -1 ] }
              ]
          }) 
  
      .makeEditable({
              //ajax requests for server-side processing
              sUpdateURL: "UpdateData.php",
              sAddURL: "AddData.php",
              sDeleteURL: "DeleteData.php",
  
              //Button Customization
              oAddNewRowButtonOptions: { 
              label: "Add...",
                              icons: { primary: 'ui-icon-plus' }
                          },
                          oDeleteRowButtonOptions: {
              label: "Remove",
                              icons: { primary: 'ui-icon-trash' }
                          },
                          oAddNewRowOkButtonOptions: {
              label: "Confirm",
                              icons: { primary: 'ui-icon-check' },
                              name: "action",
                              value: "add-new"
                          },
                          oAddNewRowCancelButtonOptions: { 
              label: "Close",
                              class: "back-class",
                              name: "action",
                              value: "cancel-add",
                              icons: { primary: 'ui-icon-close' }
                          },
              oAddNewRowFormOptions: {
                  title: 'Add New Row',
                  show: "blind",
                  hide: "explode"
                  },
  
              //Link button ids
              sAddDeleteToolbarSelector: ".dataTables_length",
              sAddNewRowFormId: "formAddNewRow"+$tblIDNum,
              sAddNewRowButtonId: "btnAddNewRow"+$tblIDNum,
              sAddNewRowOkButtonId: "btnAddNewRowOk"+$tblIDNum,
              sAddNewRowCancelButtonId: "btnAddNewRowCancel"+$tblIDNum,
              sDeleteRowButtonId: "btnDeleteRow"+$tblIDNum                                
              });
  
  });
  </code></pre>
  
  <p>What could the solution be? I don't think should be difficult, if it weren't for all the Javascript, a CSS overflow property could just be changed. Makes me regret using Datatables. : /</p>