Header and Body column misalignment when using sScrollY
Header and Body column misalignment when using sScrollY
sdinesh21
Posts: 37Questions: 0Answers: 0
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]
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]
This discussion has been closed.
Replies
Could you please comment on this issue?
I am having the same issue
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