FixedHeader 2.10 Nightly - Columns line up in IE, Firefox, but not Chrome.
FixedHeader 2.10 Nightly - Columns line up in IE, Firefox, but not Chrome.
burnchar
Posts: 118Questions: 12Answers: 0
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]
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]
This discussion has been closed.
Replies
Regards,
Allan
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
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