Right fixed rows are not aligned with respect to left rows
Right fixed rows are not aligned with respect to left rows
This issue comes only in IE (i have IE 11) . The use case is simple and easy to replicated. Let say i have 10 columns in table. I freeze first 4 column on left and 1 last column on right. I have about 360+ records in table and data table is showing all of these records with scrollX:450px. Now as i start scrolling from top soon we can notice the rows on fixed right columns are not aligned to rows on left. This is more prominent in cases where the row height varies due to data in the cell.
There is no issue with other browsers it works perfectly fine.
Code snippet i am using is very simple as below
var newId = '#inlineSection';
var inlineTable = $(newId).dataTable({
scrollY:'450px',
AutoWidth: false,
scrollX: '100%',
//sScrollXInner:'20%',
scrollCollapse: false,
paging: true,
bPaginate: true,
lengthMenu: [
[15, 30, 45, -1],
[15, 30, 45, "All"]
],
iDisplayLength:Number(recordCount),
"sDom": '<"top"i>rt<"bottom"flp><"clear">',
"sPaginationType": "full_numbers",
filter: false,
bFilter: true,
bDestroy: true,
orderClasses: false,
ordering: false,
bSort: false
});
new $.fn.dataTable.FixedColumns(inlineTable, {
leftColumns: 8,
rightColumns: 1,
iRightWidth: 72
});
Answers
Here is the test to look into. Open it into Internet explorer.
Once the page load select All rows from bottom filter and scroll to see alignment mismatch. In my case it is extreme
http://jsfiddle.net/u191awmj/17/
Use this fiddle it shows exactly how the rows are moving up and down
http://jsfiddle.net/sankkyy/nskmbtxw/1/