Primefaces datatable Frozen columns Row Heights Mi

Question

This question already has an answer here:

• Primefaces datatable frozen columns misallignment 3 answers

I have the row heights mismatch problem with the Primefaces data table frozen columns. Row heights of the frozen and not-frozen columns do not match, acting like independent data tables. The row heights are adjusted independently in the left and right layouts.

Any workarounds would be appreciated.

Answer 1

For PrimeFaces version 5.3 i wrote workaround to synchronize rows height, it is a little javascript function called on dom ready:

<h:outputScript target="body">
    $(function() {
        synchronizeRowsHeight();
    });

    function synchronizeRowsHeight() {
        var $leftRows = $('.ui-datatable-frozenlayout-left').find('tr');
        var $rightRows = $('.ui-datatable-frozenlayout-right').find('tr');

        $leftRows.each(function (index) {
            var $leftRow = $(this);
            var $rightRow = $rightRows.eq(index);

            if ($rightRow.innerHeight() > $leftRow.innerHeight()) {
                $leftRow.innerHeight($rightRow.outerHeight());
            } else {
                $rightRow.innerHeight($leftRow.outerHeight());
            }
        })
    }
</h:outputScript>