0

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.

Fatih Akdoğan
  • 1
  • 1
  • 1
  • PF Version? If newer version exhibit the same behaviour, there are two workarounds: make sure the normal cells have a default height or write some javascript and css that copy the height of the normal rows to rows of the fixed columns. – Kukeltje May 07 '15 at 20:15

1 Answers1

2

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>
antonu17
  • 523
  • 4
  • 15
  • It works fine in firefox, but chrome still make some mismatch – antonu17 Nov 04 '15 at 06:35
  • And what if you paginate? Filter? Sort? – Kukeltje Nov 04 '15 at 07:27
  • i have just static table... but its possible to call this function after sorting/filtering – antonu17 Nov 04 '15 at 07:43
  • i found how to make chrome and firefox set correct width, need to replace `$rightRow.innerHeight($leftRow.innerHeight());` to `$rightRow.innerHeight($leftRow.outerHeight());`, as well `$leftRow.innerHeight($rightRow.innerHeight());` to `$leftRow.innerHeight($rightRow.outerHeight());`. I still can't explain this, but its working. – antonu17 Nov 04 '15 at 08:33
  • It doesn't work on IE9 – Walllzzz Jan 05 '16 at 15:46
  • I have no IE9 to check, but it works on IE11 and Edge 25. – antonu17 Jan 06 '16 at 02:33
  • It works now on IE9, just apply $rightRow.innerHeight($leftRow.innerHeight()); to $rightRow.innerHeight($leftRow.outerHeight());, as well $leftRow.innerHeight($rightRow.innerHeight()); to $leftRow.innerHeight($rightRow.outerHeight());. – Walllzzz Jan 11 '16 at 10:35
  • Working solution for PF 6.2 and all browsers: https://stackoverflow.com/questions/25887963/primefaces-datatable-frozen-columns-misallignment/51306819#51306819 – Melloware Jul 12 '18 at 13:23