How to make selected input drop down boxes width stay fixed?

tbegeberg

Hi,

I have been trying to use the selected input function(drop down) function. It fits nicely when I'm not searching anything. As soon as I hit the search button all the boxes goes as wide as the text. If I remove the selected input filter and hit search the table stays the same width. I have tried to change my HTML table width, the CSS file style an many other things without luck..

Any suggestions?

(function($) {
$(document).ready(function() {
var table = $('#myTable').DataTable({
  //"searching": false,
  "dom": 'lrtip',
  "paging": true,
  "aoColumnDefs": [{ "bVisible": false, "aTargets": [2,7] }],
  initComplete: function () {
      this.api().columns().every( function () {
          var column = this;
          var select = $('<select><option value=""></option></select>')
              .appendTo( $(column.footer()).empty() )
              .on( 'change', function () {
                  var val = $.fn.dataTable.util.escapeRegex(
                      $(this).val()
                  );
                  column
                      .search( val ? '^'+val+'$' : '', true, false )
                      .draw();
              } );
          column.data().unique().sort().each( function ( d, j ) {
              select.append( '<option value="'+d+'">'+d+'</option>' )
          } );
      } );
  },
});
});
})(jQuery);

kthorngren

When I use example the drop down boxes stay the same size. Do they work for you?

Maybe you can post a test case example showing the issue.

Kevin

tangerine

Also:

As soon as I hit the search button....

What "search button"?

tbegeberg

http://www.choizz.com/

Sorry, when I initiate the connection to my MySQL database, and get data back, the table re-sizes according to the drop down menu in the bottom. I would like it to be a fixed width so it fits the browser window.

The problem is with the whole table adjusting to the the results in full width from the drop down menu. If I disable the drop down, it looks fine, and the table stays inside the browser window view.

Thanks!

kthorngren

The example helps. You can experiment with columns.width to set the initial width. My understanding is that nowrap is the default for Datatables. Please see the Styling doc.

You may need to add wrap to your table class. This will allow the column cells to wrap at spaces. This may not solve all your issues as the column width will still be as wide as the widest word in the column.

Kevin