jQuery UI Widgets Forums DataTable Browser inconsistency in data table row height

This topic contains 1 reply, has 2 voices, and was last updated by  admin 4 years ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • damerval

    I was using a jqxDataTable to display some data – here is my setup code:

    var _data_table = $(“#data_table”);

    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) {

    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.




    Hi Philippe,

    The row height is automatic in jqxDataTable which means that we do not set it and it depends only on the browser’s rendering engine. If you need a fixed row height, you should use our Grid instead.

    Best Regards,
    Peter Stoev

    jQWidgets Team

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.