title: groceryCRUD datatable width issue
body: <p>I have doubt about the data table theme of grocery CRUD library. Since i have many fields on my database tables, it seems it overlap on the div tag where i put the $output variable where it prints the data of the table. I am currently using App UI 2.1 bootstrap theme. </p>
  
  <p><strong>asssets/grocery_crud/themes/datatables/js/database.js</strong></p>
  
  <pre><code>var default_per_page = typeof default_per_page !== 'undefined' ?             default_per_page : 25;
  var oTable = null;
  var oTableArray = [];
  var oTableMapping = [];
  
  function supports_html5_storage()
  {
  try {
      JSON.parse("{}");
      return 'localStorage' in window &amp;&amp; window['localStorage'] !== null;
  } catch (e) {
      return false;
  }
  }
  
  var use_storage = supports_html5_storage();
  
  var aButtons = [];
  var mColumns = [];
  
  $(document).ready(function () {
  
  $('table.groceryCrudTable').dataTable( {
     "scrollX": true 
  });
  
  $('table.groceryCrudTable thead tr th').each(function (index) {
      if (!$(this).hasClass('actions'))
      {
          mColumns[index] = index;
      }
  });
  
  if (!unset_export)
  {
      aButtons.push({
          "sExtends": "xls",
          "sButtonText": export_text,
          "mColumns": mColumns
      });
  }
  
  if (!unset_print)
  {
      aButtons.push({
          "sExtends": "print",
          "sButtonText": print_text,
          "mColumns": mColumns
      });
  }
  
  //For mutliplegrids disable bStateSave as it is causing many problems
  if ($('.groceryCrudTable').length &gt; 1) {
      use_storage = false;
  }
  
  $('.groceryCrudTable').each(function (index) {
      if (typeof oTableArray[index] !== 'undefined') {
          return false;
      }
  
      oTableMapping[$(this).attr('id')] = index;
  
      oTableArray[index] = loadDataTable(this);
  });
  
  $(".groceryCrudTable tfoot input").keyup(function () {
  
      chosen_table =     datatables_get_chosen_table($(this).closest('.groceryCrudTable'));
  
      chosen_table.fnFilter(this.value, chosen_table.find("tfoot input").index(this));
  
      if (use_storage)
      {
          var search_values_array = [];
  
          chosen_table.find("tfoot tr th").each(function (index, value) {
              search_values_array[index] = $(this).children(':first').val();
          });
  
          localStorage.setItem('datatables_search_' + unique_hash, '["' + search_values_array.join('","') + '"]');
      }
  });
  
  var search_values = localStorage.getItem('datatables_search_' + unique_hash);
  
  if (search_values !== null)
  {
      $.each($.parseJSON(search_values), function (num, val) {
          if (val !== '')
          {
              $(".groceryCrudTable tfoot tr th:eq(" + num + ")").children(':first').val(val);
          }
      });
  }
  
  $('.clear-filtering').click(function () {
      localStorage.removeItem('DataTables_' + unique_hash);
      localStorage.removeItem('datatables_search_' + unique_hash);
  
      chosen_table = datatables_get_chosen_table($(this).closest('.groceryCrudTable'));
  
      chosen_table.fnFilterClear();
      $(this).closest('.groceryCrudTable').find("tfoot tr th input").val("");
  });
  
  loadListenersForDatatables();
  
  $('a[role=button],button[role=button]').live("mouseover mouseout", function (event) {
      if (event.type == "mouseover") {
          $(this).addClass('ui-state-hover');
      } else {
          $(this).removeClass('ui-state-hover');
      }
  });
  
  $('th.actions').unbind('click');
  $('th.actions&gt;div .DataTables_sort_icon').remove();
  
  });
  
  function loadListenersForDatatables() {
  
  $('.refresh-data').click(function () {
      var this_container = $(this).closest('.dataTablesContainer');
  
      var new_container = $("&lt;div/&gt;").addClass('dataTablesContainer');
  
      this_container.after(new_container);
      this_container.remove();
  
      $.ajax({
          url: $(this).attr('data-url'),
          success: function (my_output) {
              new_container.html(my_output);
  
              loadDataTable(new_container.find('.groceryCrudTable'));
  
              loadListenersForDatatables();
          }
      });
  });
  }
  
  function loadDataTable(this_datatables) {
  return $(this_datatables).dataTable({
      "bJQueryUI": true,
      "sPaginationType": "full_numbers",
      "bStateSave": use_storage,
      "fnStateSave": function (oSettings, oData) {
          localStorage.setItem('DataTables_' + unique_hash, JSON.stringify(oData));
      },
      "fnStateLoad": function (oSettings) {
          return JSON.parse(localStorage.getItem('DataTables_' + unique_hash));
      },
      "iDisplayLength": default_per_page,
      "aaSorting": datatables_aaSorting,
      "oLanguage": {
          "sProcessing": list_loading,
          "sLengthMenu": show_entries_string,
          "sZeroRecords": list_no_items,
          "sInfo": displaying_paging_string,
          "sInfoEmpty": list_zero_entries,
          "sInfoFiltered": filtered_from_string,
          "sSearch": search_string + ":",
          "oPaginate": {
              "sFirst": paging_first,
              "sPrevious": paging_previous,
              "sNext": paging_next,
              "sLast": paging_last
          }
      },
      "bDestory": true,
      "bRetrieve": true,
      "fnDrawCallback": function () {
          $('.image-thumbnail').fancybox({
              'transitionIn': 'elastic',
              'transitionOut': 'elastic',
              'speedIn': 600,
              'speedOut': 200,
              'overlayShow': false
          });
          add_edit_button_listener();
      },
      "sDom": 'T&lt;"clear"&gt;&lt;"H"lfr&gt;t&lt;"F"ip&gt;',
      "oTableTools": {
          "aButtons": aButtons,
          "sSwfPath": base_url + "assets/grocery_crud/themes/datatables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf"
      }
  });
  }
  
  function datatables_get_chosen_table(table_as_object)
  {
  chosen_table_index = oTableMapping[table_as_object.attr('id')];
  return oTableArray[chosen_table_index];
  }
  
  function delete_row(delete_url, row_id)
  {
  if (confirm(message_alert_delete))
  {
      $.ajax({
          url: delete_url,
          dataType: 'json',
          success: function (data)
          {
              if (data.success)
              {
                  success_message(data.success_message);
  
                  chosen_table = datatables_get_chosen_table($('tr#row-' + row_id).closest('.groceryCrudTable'));
  
                  $('tr#row-' + row_id).addClass('row_selected');
                  var anSelected = fnGetSelected(chosen_table);
                  chosen_table.fnDeleteRow(anSelected[0]);
              }
              else
              {
                  error_message(data.error_message);
              }
          }
      });
  }
  
  return false;
  }
  
  function fnGetSelected(oTableLocal)
  {
  var aReturn = new Array();
  var aTrs = oTableLocal.fnGetNodes();
  
  for (var i = 0; i &lt; aTrs.length; i++)
  {
      if ($(aTrs[i]).hasClass('row_selected'))
      {
          aReturn.push(aTrs[i]);
      }
  }
  return aReturn;
  }
  </code></pre>
  
  <p><strong>controller/InfoTable.php</strong></p>
  
  <pre><code>&lt;?php
  
  defined('BASEPATH') OR exit('No direct script access allowed');
  
  class Infotable extends CI_Controller {
  
  function __construct() {
      parent::__construct();
      $this-&gt;load-&gt;database();
      $this-&gt;load-&gt;helper('url');
      $this-&gt;load-&gt;library('grocery_CRUD');
  }
  
  public function residents() {
      $this-&gt;_example_output((object) array('output' =&gt; '', 'js_files' =&gt; array(), 'css_files' =&gt; array()));
  }
  
  public function index() {
      $crud = new grocery_CRUD();
  
      $crud-&gt;set_subject('Resident');
      $crud-&gt;set_table('resident');
      $crud-&gt;set_theme('datatables');
      $crud-&gt;columns('name', 'mname', 'lname', 'gender', 'bday', 'age', 'citizenship', 'occupation', 'status', 'purok', 'resAddress', 'perAddress', 'email', 'telNum', 'cpNum');
      $crud-&gt;set_primary_key('resident_id', 'resident');
  
      $crud-&gt;display_as('name', 'First Name')
              -&gt;display_as('mname', 'Middle Name')
              -&gt;display_as('lname', 'Last Name')
              -&gt;display_as('gender', 'Gender')
              -&gt;display_as('bday', 'Birthdate')
              -&gt;display_as('age', 'Age')
              -&gt;display_as('citizenship', 'Citizenship')
              -&gt;display_as('occupation', 'Occupation')
              -&gt;display_as('status', 'Status')
              -&gt;display_as('purok', 'Purok')
              -&gt;display_as('resAddress', 'Residential Address')
              -&gt;display_as('perAddress', 'Permanent Address')
              -&gt;display_as('email', 'Email Address')
              -&gt;display_as('telNum', 'Tel. #')
              -&gt;display_as('cpNum', 'Cellphone #');
  
      $output = $crud-&gt;render();
  
      $this-&gt;_example_output($output);
  }
  
  function _example_output($output = null) {
      $this-&gt;load-&gt;view('Backend/page_ui_tables', $output);
  }
  
  }
  </code></pre>
  
  <p>what i'm trying to get here is i want to add scrollX option on the datatables theme on the library but it seems the css and js functions of the theme will damage/malfunction. i think that it's the bootstrap theme that damaging it. </p>
  
  <p>Any help will much appreciated, thanks in advance.</p>