Header and Body column misalignment when using sScrollY

sdinesh21

Hi,

I am using Datatables 1.9.4 and have linked my page to Datatables debugger link - http://debug.datatables.net/exaquv

There are 3 Datatables in the link, all of them have client side processing and with sScrollY set. When I set the vertical scrolling, the column body misaligns with the header. Please check this issue and advise.

This is my code...
[code]
$('#scheduledJobsTable').dataTable({
"sScrollY": (0.9 * $(window).height()),
"sDom": 'Rrt',
"aaSorting": [[4,'asc']],
"bPaginate": false,
"sAjaxSource": scheduledJobsURL,
"bServerSide": false,
"bAutoWidth" : false,
"bScrollCollapse": true,
"aoColumns":
[
{"mData" : "jobId", "sTitle" : "ID", "sWidth": "2%"},
{"mData" : "jobType", "sTitle" : "Job Type", "sWidth": "10%"},
{"mData" : "jobDetails", "sTitle" : "Parameters", "sWidth": "10%"},
{"mData" : "lastRunTimeString", "sTitle" : "Last Run", "sWidth": "8%"},
{"mData" : "nextRunTimeString", "sTitle" : "Next Run", "sWidth": "8%"},
{"mData" : "singleRunJobTimings", "sTitle" : "Single Run Timings", "sWidth": "15%"},
{"mData" : "recurringRunJobTimings", "sTitle" : "Recurring Frequency", "sWidth": "8%"},
{"mData" : "runStartTimeString", "sTitle" : "Run Start Time", "sWidth": "8%"},
{"mData" : "runEndTimeString", "sTitle" : "Run Stop Time", "sWidth": "8%"},
{"mData" : "activeInd", "sTitle" : "Enabled", "sWidth": "4%"},
{"mData" : "forceRun", "sTitle" : "Force Run", "sWidth": "4%"},
{"mData" : "dayInWeek", "sTitle" : "Scheduled Days", "sWidth": "15%"}
]
});

[/code]

sdinesh21

Hi Allan,

Could you please comment on this issue?

PedroSena

I am having the same issue

allan

Please link to a test case showing the issue. Very likely the problem is that you are initialising the table while it is hidden and the column widths need to be adjusted when it is visible using columns.adjust() - but we need a test case (as noted in the forum rules).

Allan