Header sizes initially: but resizing container makes it not line up with the body

archnemisis

The table resizes correctly for one container size, but once the container resizes with jquery dataTables_scrollBody expands correctly but dataTables_scrollHead stays the initial width. reducing puts the issue in the jquery library which I can't remove.
Datatables:
[code]
var oTable = $('#table_id').dataTable({
"bAutoWidth": true,
"bLengthChange": false,
"bSortClasses": false,
"bFilter": true,
"bPaginate":false,
"bInfo":true,
"sPaginationType": "full_numbers",
"oLanguage": {
"sSearch": "Filter records:",
"sInfo": "Total: _TOTAL_ f datas"
},
"sScrollX": "100%",
"sScrollXInner": "150%",
"sScrollY": 500,
"bScrollCollapse": true,
"sDom": "ilfrtp",
"aaSorting": [[0, "asc"]],
});
[/code]
HTML:
[code]



Open
<!-- #button-panel -->
<!-- .table-top -->





F Data Name
Description
Data Owner
Organization
Created On
Last Update




Data

Smith, John
Corp
1/3/12
1/3/12





<!-- .table-container -->
[/code]

allan

You need to call fnAdjustColumnSizing when the window is resized (i.e. in a resize event handler) so DataTables can adjust for the new available area.

Allan

archnemisis

fnAdjustColumnSizing resizes the body columns to the width of the header (incorrect)

allan

Can you link to a test page show I can see the problem in action please?

Allan

alongtheivy

I am having a similar problem. I have a table, and all the titles to the columns will not line up over the columns, they are all crushed to the left side of the screen. I am calling fnAdjustColumnSizing, but it doesn't automatically fix the error. If I minimize and maximize my screen then everything works as it should and they line up. but without it, it doesn't work. here is my code:

function (schedule) {
if (schedule) {
var crewTbl = ich.crewData(schedule);
crewTbl.find('#crewTable').dataTable( {
//"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'><'span6'p>>",
"sDom": "t",

"oLanguage": {
"sLengthMenu": "_MENU_ records per page"

},
"bSort": false,
"bPaginate": false,
"sScrollY": "200",
"bScrollCollapse": true
} );


fp.async(function() {
//adjust column sizing to make sure the column headers line up

$('#crewTable').dataTable().fnAdjustColumnSizing();

//this is the search filter for the table
$('#crewSearch').on('keyup',
function() {
$('#crewTable').dataTable().fnFilter($(this).val());
});



// addCrewColumnFilters();

//make sure the table resizes properly when window is resized
$(window).bind('resize', function () {
$('#crewTable').dataTable().fnAdjustColumnSizing();
} );

} );