0

I have read at least one promising post about this here on SO, namely

Force DOM redraw/refresh on Chrome/Mac

The advice there does not seem to work in my IE11 browser.

What I'm really trying to solve is a primefaces issue where updating to v5.1 have resulted in a clone of a header in one of my datatables which is partly visible (eventhough height is set to 0 through:

<thead style="height:0;">

Here is what I have tried which I have gotten to work in Firefox.

First I hide the already visible thead through css. I do so because that thead is not following the column boundaries of the other columns in the datatable, (in html speak it is actually not a part of the same table as the rest of the table):

div[id*="contextualPartOfId"] .ui-widget-header.ui-datatable-scrollable-header {
display:none;

}

That part works fine in both browsers.

Since the wanted theads height is decided by style attribute I now turn to JavaScript:

First I search for the thead element (or rather the only element which has the given class name)

The element is usually not available during the first call. So I retry until the element is found.

Then I set the height and try to force a redraw. 

        var hackPrimefaces51DoubleHeaderProblem = function() {
            if (document.getElementsByClassName('ui-datatable-scrollable-theadclone')[0]) {

                var thead = document.getElementsByClassName('ui-datatable-scrollable-theadclone')[0];

                thead.style.height = "50px";
                forceRedraw(thead);

            }
            else {
                console.log("about to set Timeout");
                window.setTimeout(hackPrimefaces51DubbelRubrikProblem, 100);
            }
        };

        var forceRedraw = function(aNode) {
            var pNode = aNode.parentNode;
            var n = document.createTextNode(' ');
            var oldDisplay = pNode.style.display;  

            pNode.appendChild(n);
            pNode.style.display = 'none';

            setTimeout(function() {
                pNode.style.display = oldDisplay;
                n.parentNode.removeChild(n);
            },120);
        };


        hackPrimefaces51DoubleHeaderProblem();

I would appreciate a suggestion to succeed with the approach described above.

If anyone's run into this primefaces problem a cause and/or possibly a workaround would be even better.

Community
  • 1
  • 1
Rythmic
  • 759
  • 2
  • 10
  • 25
  • Do you know why the header is duplicated? – Kukeltje Feb 05 '15 at 12:09
  • No, I've read around about the problem and it seems to have come with the primefaces 5.1 update. Both thead elements are part of primefaces datatable Component. – Rythmic Feb 05 '15 at 12:20
  • I thought I had a deja-vu: http://forum.primefaces.org/viewtopic.php?f=3&t=40002 (you did not search google/PF forum did you?) – Kukeltje Feb 05 '15 at 12:32
  • Yes, I too have read that exact post this morning, but I could not find any css dabbling with that thead in my code. – Rythmic Feb 05 '15 at 12:35
  • Ok, can you post an [mcve](http://stackoverflow.com/help/mcve). I can hardly imagine that a hack like this is needed. And please next time mention what you did and tried before, see [ask]. Saves us time. And – Kukeltje Feb 05 '15 at 12:41

0 Answers0