I was using a jqxDataTable to display some data – here is my setup code:
var _data_table = $(“#data_table”);
_data_table.jqxDataTable({
width: 900, height: 598, theme: “metro”,
source: adapt_table_source,
columns: [
{ text: “ID”, dataField: “DatabaseLogID” },
{ text: “Date”, dataField: “PostTime”, cellsFormat: “MM/dd/yyyy” },
{ text: “Event”, dataField: “Event” },
{ text: “Schema”, dataField: “Schema” },
{ text: “Object”, dataField: “Object” }
],
pageable: true,
pageSize: 20,
autoRowHeight: false
});
_data_table.on(‘rowClick’, function(event) {
$(“#tsql_text”).val(event.args.row[“TSQL”]);
});
Everything works fine, with one small problem: The height of the table rows is inconsistent across browsers. Chrome, Safari and Opera display the table just fine, with the total height of 598px being able to fit exactly 20 rows. Firefox and IE display the table with a right hand scroll bar because the 20 rows don’t quite fit. Looking at the live computed styles, they show a row height of 27px on Chrome and the others, while on Firefox and IE it’s 27.77px (???) with nothing else different between the two.
I’d include screenshots, but I don’t think it’s possible on this forum.
Does anyone know:
– Why this is happening?
– What can be done to remedy the discrepancy? This is a proof of concept for a tightly packed UI and every ounce of real estate counts.
Thanks!
Philippe
