Cannot Set Column Width
Cannot Set Column Width
Taylor514ce
Posts: 74Questions: 8Answers: 0
My columns all render the same, equal, sizes. I need to set specific columns to specific widths in px. I've tried using both the "columns" option and the "columnDefs" options, and my width settings are ignored.
Given the table object below, how would I control the widths of specific columns?
<!-- Assignment List DataTable objects and helper functions -->
obj_tblAssignments = $('#tblAssignments').DataTable( {
initComplete: function(settings, json) {
// Apply the search
this.api().columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change clear', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
},
processing: true,
serverSide: false,
scrollY: $(document).height() - 320,
scrollCollapse: true,
paging: false,
info: false,
order: [[ 0, "asc" ]],
columnDefs: [
{
targets: [1],
createdCell: function (td, cellData, rowData, row, col) {
$('a', td).eq(0).attr('onclick', 'getCourse(' +rowData[0] + '); target="_blank"; return false;' );
}
}
],
sDom: '<"H">t<"F">',
ajax: 'fetchAssignments'
} );
Answers
Could be the text inputs used for the column search. You might need to add a CSS like this:
Another item that might affect the column widths is the width of the data in the column. The browser might be forcing the column width wider than expected due to the data width. There are some options to look at if this is the case. Let us know.
If you still need help please post a link to your page or a test case replicating this issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
It definitely has something to do with the footer, when I remove it, the column widths autofit nicely, instead of all being of equal size. Adding the style declaration didn't help, but I'll keep exploring how to handle the footer.
Setting the style of the input inline was the fix:
Nice, thanks for reporting back. And sorry about the need to post several times, the spam filter was a little too aggressive!
Colin