FixedHeader 2.10 Nightly - Columns line up in IE, Firefox, but not Chrome.

burnchar

Using FixedHeader Nightly dated Sat 20th Jul 2013, 11:48.

When FixedHeader is loaded, the columns look as expected in IE9 and Firefox, but not Chrome. Chrome bug?
How's that for a new one -- IE is displaying correctly but Chrome is not.

An image of the misaligned headers and of the CSS according to FireBug for the left-most column is available below:
http://imgur.com/a/gaBFP

My DT initialization code is below:

[code]//
// Create DataTable
//
dataTableObject = $(jqDomTableID).dataTable({
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
var isChainedRecipeRow = (aData.CHAINED_FLAG == 'T');
if (isChainedRecipeRow) {
$(nRow).addClass("readonly chained");
}

var hasPendingRecipeChange = isInteger(aData.RECIPE_PENDING_APPTRANS);
var hasPendingImplantChange = isInteger(aData.IMPLANT_PENDING_APPTRANS);
var hasPendingSpeciesChange = isInteger(aData.SPECIES_PENDING_APPTRANS);

if (hasPendingRecipeChange || hasPendingImplantChange || hasPendingSpeciesChange) {
$(nRow).addClass("readonly ps");
}

return nRow;
},

"fnInitComplete": function(settings, json) {
editor.field('EQUIPMENT[].id').update(json.EQUIPMENT);
editor.field('SPECIES_ID.id').update(json.SPECIES_ID);
new FixedHeader(dataTableObject, { "left": false, "right": false, "top": true, "bottom": false });
},
"bJQueryUI": true,
"bProcessing": true,
"sDom": '<"H"lfr>t<"F"ip>',
"sAjaxSource": "@Url.Content("~/API/MainView")" + "?search=" + searchText,
"aoColumns": [
{
"mData": null,
"sClass": "center",
"sDefaultContent": approvalTransactionData.noApproval
? 'Edit'
: 'Copy / Delete / Edit'
},
{ "mData": "DEVICE" },
{ "mData": "ROM" },
{ "mData": "ECA", "sClass": "noapproval" },
{ "mData": "PROCESS" },
{ "mData": "STAGE" },
{
// Show the order with child recipes as "X.Y", or just "X" without.
"mData": "PARENT_ORDER",
"mRender": function(data, type, row) {
var retval = row['PARENT_ORDER'];
if (row['CHILD_ORDER'] != null && row['CHILD_ORDER'].length > 0) retval += "." + row['CHILD_ORDER'];
return parseFloat(retval);
}
},
{
// Show DOSE as an exponent rather than a very long integer.
"mData": "DOSE",
"mRender": function(data, type, row) {
return getDoseForDisplay(data);
}
},
{ "mData": "RECIPE", "sClass": "noapproval" },
{ "mData": "PARENT_RECIPE" },
{ "mData": "SPECIES_ID.name", "sDefaultContent": "Edit to view" },
{ "mData": "ENERGY" },
{ "mData": "TILT" },
{ "mData": "TWIST" },
{ "mData": "ROTATION" },
{ "mData": "CHARGE" },
{ "mData": "EQUIPMENT", "mRender": "[, ].name", "sClass": "noapproval" },
{ "mData": "RECIPE_NOTES", "sDefaultContent": "" }
],

"oLanguage": {
"sSearch": "Search within results:",
"sZeroRecords": "No rows to display.",
"sProcessing": "Waiting for Oracle...",
"sLoadingRecords": "Waiting for Oracle..."
},

"sPaginationType": "full_numbers",
"iDisplayLength": -1, // Initially display this many rows
"aLengthMenu": [
[-1, 15, 42, 100],
["All", 15, 42, 100]
],
"aoColumnDefs": [
{ "sType": "scientific", "aTargets": [7] },
{ "bSearchable": false, "aTargets": [0, 6, 7, 11, 12, 13, 14, 15] },
{ "bSortable": false, "aTargets": [0] }
]
});[/code]

allan

Which version of Chrome are you using? If you are using 30.0.1599.69 then yes, its a Chrome bug - they put in an optimisation which completely broke offsetWidth for display:table-cell. An update with the optimisation removed was released yesterday, which resolves the issue.

Regards,
Allan

burnchar

Allan, you are right. It now works in Chrome.
What unusual timing. FixedHeader has been out for ages, and the day I finally start to really use it is the day before Chrome's fix.
Thank you, Allan! (And Google)

allan

Heh - so it goes...! Good to hear it works now though!

Allan

HeathN

Issue 1:
I am having an issue where in Firefox and Chrome the columns are offset from the floating header, the effect is more dramatic in Chrome (Version 30.0.1599.101 m). The effect is even there ever so slightly in IE8-10, but they are not off there by anything more than a pixel.

[code]
var oTable = jqnc('table.assignReq').dataTable( {
"sScrollY": "300px",
"sScrollX": "100%",
"bScrollCollapse": true,
"bPaginate": false
});
new FixedColumns(oTable,{
"iLeftWidth": 130
});
[/code]

Latest stable version of Datatables and FixedColumns

allan

@HeathN - Please link to a test case.

Allan