Fixed table headers

[Bren]

I just tried your suggestion and this worked great on my iPad.
Thank you, Bauer. Your awesome. I really appreciate it.

 

[psallidas.ioannis@gmail.com]

Hello.

First of all, great effort for coming up with this useful piece of code.

I have used the code as per http://fabrikar.com/forums/index.php?wiki/list-javascript/

My tables span two “screens” horizontally wise, meaning that I also need to be able to do left-right scrolls together with vertical scrolls, to obverse all the listed information, with the associated list column names.

The code behaves as expected when I do vertical scrolls, but it does not work when I do left-right scrolls. To be more precise, once I do a vertical scroll and I want to move to the horizontal “off-screen” section of my table to the right, the “hovering” list header does not follow the screen scroll but is frozen to the position of the last vertical scroll. I have to move at the top of the list, make my horizontal scroll to the right and then make a vertical scroll to arrive to the table section of interest, that was previously off screen, with the correct column names appearing in the header.

I looked at the code listed in the above wikki and I have a feeling that the “/* detach/attach table header */” section of the code, takes care the vertical scroll once it happens by creating a hovering header, but after that it does not consider any horizontal scrolls. By adding the following else statement after the first nested “if” of the “/* detach/attach table header */” section, as shown bellow, the problem is solved and I have a hovering header that responds to both vertical and horizontal scrolls.

Please confirm / refine, because I am javascript illiterate and I hope that haven't waisted your time with my js ignorance.

    /* detach/attach table header */
    if(tgBodyTop > window.tableFromTop) {
        if(jQuery("#listform_40_com_fabrik_40 div.fabrikDataContainer table.temptable").length==0){
            var temphead = jQuery("table#list_40_com_fabrik_40 thead").clone();
            jQuery(temphead).prop('id','temphead');

            /* Create fixed header */
            var tableclasses = document.getElementById("list_40_com_fabrik_40").className;
            /* The z-index may have to be set higher if the fixed header is not 'on top' */
            jQuery("#listform_40_com_fabrik_40 div.fabrikDataContainer").prepend('<table class="'+tableclasses+' temptable" style="width:'+window.tablewidth+'px;z-index:1"><thead>'+jQuery(temphead).html()+'</thead></table>');

            /* Note: Set the "top:" fixed position for table header in function setHeaders() */
            jQuery("table.temptable").css({"position":"fixed","top":window.fixedMenuHeight+"px","left":tgBodyLeft+"px"});
        }
        /************Proposed code. Takes care of the horizontal scrolling ************************************/
        else
        {
            jQuery("table.temptable").css({"position":"fixed","top":window.fixedMenuHeight+"px","left":tgBodyLeft+"px"});
        }
        /*******************************************************************************************************************/
    }else{
        if(jQuery("#listform_40_com_fabrik_40 div.fabrikDataContainer table.temptable").length){
            jQuery("#listform_40_com_fabrik_40 div.fabrikDataContainer table.temptable").remove();
        }
    }

 

[Enrique_Barrajon]

Hi Bauer, I created a .JS sheet with your instructions with the code posted in WIKI to set the fixed headers and it works, but my list table is very large and exceeds the horizontal limits of the screen, so in at the time, I added a bit of CSS to be able to scroll horizontally across the screen.
The problem is now when adding your code for the fixed headers because they do not follow horizontally when scrolling through the large table, also they are not seen in a row with the data containing table, the header appears in the entire width of the screen and the original table is narrower, but the header does keep the width of each column.
Attachment screenshot.
How is this resolved?
I have played with the CSS but have not been successful.
Thank you very much for contributing all of this!