Resizing column header / title problem. Only resizes when screen is minimized then maximized

alongtheivy

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 min and maxing, it doesn't work right away. 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();
} );

} );

fearednerd

try:

window.onresize = function(){
$('#crewTable').dataTable().fnAdjustColumnSizing();

}

or set your table with a var name so you can just call varNameTable.fnAdjustColumnSizing();

Fair warning though, this method could make the table go crazy if you are using ie8. The way ie8 is coded or something makes the onresize get triggered infinitely and just goes nuts.

alongtheivy

neither one of those worked...
I tried inserting the window.onresize in several places in the code as well.

alongtheivy

i have three tabs. this function/set of code works on the first tab, but not the next two. i tried commenting out the first tab's code, but the next two still won't work correctly.