• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

Fixed table headers

Thinking about it, my main problem in the past has been supporting <= IE8. I haven't tried since IE10 came out, meaning that technically we can get away with only supporting IE9/10. Next time I get a few free minutes, I'll give this solution a go.

-- hugh
That is why it drives me up a wall working with javascript. And for years my favorite rant was 'I hate Microsoft'. Even in IE10 they are still playing by their own rules in many cases. For example, in IE10 the height of a div (or tbody) is always shown as 'auto'. I mean really, you'd think the least they could do is calculate a container height.
 
They are getting a little better, and moving forwards they have even committed publicly to doing a lot better at sticking to standards with the All New Microsoft Edge Which Isn't Just IE 12 Honest It's Something Entirely New. Of course, I'll believe it when I see it.

For an upgrade of this type my company is willing to pay !!!

d.bergonzi - if you two want to work out a deal, and Bauer submits a PR, I'll merge it.

-- hugh
 
I'm not even sure how this would be incorporated into fabrik (other than offering it up as a 'suggested' javascript file for users who want sticky headers/footers in a list).

My 'payroll' comment was tongue-in-cheek. I'm a bit of a socialist in this regard - which I suppose helps explain why I have never been able to afford paying for support.;) I gave up trying to get rich off programming years ago. Yet, having done it 'professionally' (where I was on a payroll) for over a dozen years, I understand and appreciate all capitalistic endeavors and have high regards and respect for anyone who is in this business - especially the 'little guys' who are the real entrepreneurs at the core of making it all happen.
 
Do you know offhand if the code will handle the "Toggle Columns" feature (dynamic showing/hiding of columns and groups)?

-- hugh
 
This is an old WIKI.
Since Fabrik3.1? it's included in list settings ("Filters" tab).
 
I'll have to check it out.
It should be as simple as just ignoring any hidden columns in the setHeaders() function.
So the last 2 lines of code in that function

window.hcol[k] = xwidth-.5;
k++;

would change to
if(jQuery(this).is(":visible")) {
window.hcol[k] = xwidth-.5;
k++;
}

And then of course you'd have to call setHeaders() whenever any of the columns were toggled.
 
This is an old WIKI.
Since Fabrik3.1? it's included in list settings ("Filters" tab).
Thanks troester. I really DO learn something new every day.:)

The code change I suggested above works (to allow for using toggled columns) - but, duh, it also requires that "if'" condition to be place both where the column widths are initialized AND where the sticky headers get repainted.

No other changes are required - though I did find a few bugs in my code, fixed them - and will replace the last code I posted in this thread with those changes.

Another thing I noticed is that the sticky footer was working in Firefox but not chrome. The sticky footer is getting placed there OK in Chrome but not removed and 're-attached' to the bottom of the form as it should when you scroll to the bottom of the page. So I'll have to look into that.

I did find a fabrik bug with that toggle column feature though. (See attachment).
If you also use filters in the header, the fabrik code is not removing the hidden column in that tr.fabrikFilterContainer (just as I had to do with the sticky header) and so the 2 header rows are 'off'.

Also as you'll see in the attachment - the word 'Actions' is being shown/repeated in the fabrikFilterContainer header because the last column is using the same fabrik_actions class as the 'real' header.
 

Attachments

  • toggle_bug.png
    toggle_bug.png
    72.3 KB · Views: 400
Dear Buer, I did try you last code updated on Update 4/30/2015 and it's very good but I still have a couple of issue, first the width of columns below the header changes when scrolling down as you can see in screenshot 2 (I had this issue before with the first code you posted) and finally when scrolling to right the header remain fixed and it should scroll with the whole table to follow the other colums, as you can see in screenshot three.
I did try via css with no success, any advice?

Thanks a lot!
 

Attachments

  • one.png
    one.png
    116.6 KB · Views: 424
  • two.png
    two.png
    151 KB · Views: 436
  • three.png
    three.png
    148.5 KB · Views: 417
Gee, you just love poking sticks in my spokes, don't you?;)
First off, are you using the standard bootstrap fabrik list template - and the Joomla protostar template?

You still need to include some css styling to add a background color to the 'normal' header and footer (and perhaps a z-index setting to bring them to the top layer). That would go a long way in helping to really see what you've got.

It looks like you have added yet another thing that I never used or accounted for... Individual row filters (the column with the filter icon at the top). I'll look into that once someone tells me how you did that.:confused:

As mentioned in another thread, there is still a bug (sorry Hugh, I mean 'insufficiently documented feature') that causes the filters heading row to not be displayed properly after a column is hidden. This only occurs if you are using both the 'filters in header' option and the 'toggle columns' feature (to allow the user to show/hide certain columns). I notified cheesegrits about that issue and maybe it will be fixed soon - though, since it probably affects very few users, I doubt that is high on anyone's 'to do' list.

Also, I never really tested this code with such a wide list (that initially includes horizontal scroll bars). My guess is I would only have to include some code to scroll the list left each time the list widths get recalculated. I'll look into that too.

Otherwise, the list is working fine for me.:p
 
I am sorry I did not give you all the info before.
Actually with the jquery plugin I tried to use (jquery.stickytableheaders.js) everything is displayed terrific, but unfortunately the filter search in the header does not work, it would be terrific to find a way to fix that.

By the way thank a lot for your lovely support!
 
Sorry d. - I meant to respond to this earlier this week.

Since I use this fixed headers/footer code in a few lists, and use both a fixed menu bar and the toggle columns options, I implemented those requested changes myself.

I had to take a different approach to the way the column widths are initialized - in order to handle toggled columns. It seems to work fine - so here's the latest and greatest code I have for this...
Code:
jQuery(document).ready(function(){
 
    requirejs(['fab/fabrik'], function () {
        window.eTop = jQuery("table#TABLEID tbody").offset().top;
        window.eFoot = jQuery("table#TABLEID tfoot").offset().top;
 
        // this will refresh header on ajax update (display row limit changed, pagination, filter changed, etc.)
        Fabrik.addEvent('fabrik.list.update', function (block) {
            setHeaders();
        });
 
        // this will refresh header on toggle of column visibility
        jQuery("a[data-toggle-state]").click( function () {
            // changes focus to close toggle dropdown
            jQuery("div.fabrikDataContainer").click();
            setHeaders();
        });
 
        setHeaders();
    });
 
    jQuery(window).scroll(function(event){
        window.bodyTop = jQuery(this).scrollTop();
        window.thisTop = window.eTop - jQuery(window).scrollTop(); //position of the ele window
        window.tableWidth = jQuery("table#TABLEID tbody.fabrik_groupdata").width();
        // Use for debugging
        // console.log("headerHeight::"+window.headerHeight+" | bodyTop::" + window.bodyTop + " | eTop::"+window.eTop+" | thisTop::"+window.thisTop+" | eFoot::"+window.eFoot+" | footHeight::"+window.footHeight+" | dataHeight::"+window.dataHeight);
        if (window.thisTop < window.headerHeight && window.bodyTop < window.dataHeight) {
            var colCount = jQuery("table#TABLEID>tbody.fabrik_groupdata>tr.fabrik_row>td").length;
            jQuery("div.fabrikNavContainer").css({"position":"fixed","top":0+window.menuHeight + "px"});
            jQuery("div.fabrikNavContainer").width(window.tableWidth);
            jQuery("table#TABLEID thead").css({"position":"fixed","top":window.menuHeight+window.navHeight+"px"});
            jQuery("table#TABLEID thead").width(window.tableWidth);
 
            for (k = 1; k <= colCount; k++) {
                jQuery("table#TABLEID>tbody.fabrik_groupdata>tr.fabrik_row>td:nth-child("+k+")").outerWidth(window.hcol[k]);
                jQuery("table#TABLEID>thead>tr.fabrik___heading>th:nth-child("+k+")").outerWidth(window.hcol[k]);
            }
        }else{
            jQuery("table#TABLEID thead").css({"position":"relative","top":"0px"});
            jQuery("div.fabrikNavContainer").css({"position":"initial","top":"auto"});
        }
 
        // include this if you also want a sticky table footer
        // use for debugging
        // console.log("bodyTop::" + window.bodyTop + " | eTop::"+window.eTop+" | headerHeight::"+window.headerHeight+" | footHeight::"+window.footHeight+" | dataHeight::"+window.dataHeight);
        if (window.bodyTop + window.eTop + window.headerHeight + window.footHeight*2 < window.dataHeight ){
            jQuery("#TABLEID tfoot tr").css({"position":"fixed","bottom":"0","width":window.tableWidth+"px"});
        }else{
            jQuery("#TABLEID tfoot tr").css("position","relative");
        }
    });
 
    /* resets header on window resize */
    jQuery(window).on('resize', function(){
        jQuery("table#TABLEID>thead>tr.fabrik___heading>th").each(function (){
            jQuery(this).css("width","auto");
        });
        jQuery("table#TABLEID>tbody.fabrik_groupdata>tr.fabrik_row:eq(0)>td").each(function(){
            thisClass = jQuery(this)[0].classList[0];
            jQuery("td[class^="+thisClass+"]").css("width","auto");
        });
        jQuery("table#TABLEID").css("width","100%");
        setHeaders();
    });
 
});
 
 
function setHeaders() {
    /* set menuHeight to 0 (zero) if you don't have a fixed menu at the top of the page
      or if you don't want to show the fixed menu above the sticky table headers */
    window.menuHeight = 46;
 
    /* set navHeight to 0 (zero) if you aren't using navigation options
      or don't want to include the buttons container in the fixed header */
    window.navHeight = jQuery("div.fabrikButtonsContainer").height();
 
    window.headerHeight = window.navHeight + jQuery("table#TABLEID thead").innerHeight();
    window.dataHeight = jQuery("table#TABLEID tbody.fabrik_groupdata").height();
    window.footHeight = jQuery("#TABLEID tfoot tr").height();
    window.tableWidth = jQuery("table#TABLEID tbody.fabrik_groupdata").width();
 
    /* (Optional) This scrolls the table header to the top on load  */
    jQuery(this).scrollTop(window.eTop - window.headerHeight);
 
    // sets the position styling to defaults - 're-attaches' the fixed headers/footer
    jQuery("div.fabrikNavContainer").css({"position":"initial","top":"auto"});
    jQuery("table#TABLEID thead").css({"position":"initial","top":"auto"});
    jQuery("#TABLEID tfoot tr").css({"position":"initial","top":"auto"});
 
    // use for debugging
    // console.log("headerHeight::"+window.headerHeight+" | dataHeight::" + window.dataHeight + " | footHeight::"+window.footHeight+" | tableWidth::"+window.tableWidth);
 
    // gets column widths from table body
    window.hcol = new Array();
    var colCount = jQuery("table#TABLEID>tbody.fabrik_groupdata>tr.fabrik_row:eq(0)>td").length;
    for (k = 1; k <= colCount; k++) {
        window.hcol[k] = jQuery("table#TABLEID>tbody.fabrik_groupdata>tr.fabrik_row>td:nth-child("+k+")").outerWidth();
        // use for debugging
        // console.log('window.hcol['+k+'] is '+window.hcol[k]);
    }
}

I added the options to include a fixed menu bar at the top - and the navigation pills.

If you want to include a fixed menu bar you need to change the window.menuHeight= (on line 73) to the exact height (in pixels) of your menu bar.

Also set window.navHeight=0 (line 77) if you don't want the navigation DIV to be fixed on top.

There is however one tweak that I made to the template file, just to make this coding less difficult, in order for this code to work (and if you want the navigation DIV at the top to also remain fixed). I added a 'fabrikNavContainer' class to the div container that holds the nav pills (which only had the 'row-fluid' class). That seems to only make sense - and stays consistent with the other DIVs in the template. When I get some time I'll need to request that change on github.

Until then you'd need to change line 16 of components/com_fabrik/views/list/tmpl/bootstrap/default_buttons.php from...
<div class="row-fluid">
to
<div class="fabrikNavContainer row-fluid">

And finally, I removed the css for background-colors and z-index from the javascript code. This would all probably work better, and require less editing of the javascript code, if that was kept in the components/com_fabrik/views/list/tmpl/bootstrap/custom_css.php file. So here are suggested css additions (tweak as needed)...
Code:
/* suggested css for sticky headers / nav-bar / footer */
/* assigns background color for containers (if transparent)
  and use z-index to bring object to forefront */
 
/* assign background color for navigation pills (if transparent) */
form#FORMID div.fabrikNavContainer {
    background-color: #ffffff;
    z-index: 999;
}
 
table#TABLEID thead tr.fabrikFilterContainer {
    background-color: #cecece;
    z-index: 99;
}
 
table#TABLEID thead {
    z-index: 99;
}
 
table#TABLEID tfoot tr {
    background-color: #cecece;
    z-index: 999;
}
Note the FORMID needed for the new fabrikNavContainer class (rather than the TABLEID).

Another issue of note is that when using the debugging console in Chrome (i.e. 'Inspect element') the table body will run off right side of the screen if the table is wider than the window width. But that must be a Chrome bug and only happens in Chrome. So you'll need to toggle off the 'Inspect element' feature when testing the functionality in Chrome.
 
Thanks for your precious support. Unfortunately this time seems not to work, at all. I did add the class fabrikNavContainer, changed all the TABELID but the only thing to work is the CSS.
Don't get why, the page load very slowly but the table remain the same except for the CSS.

Any suggestion?!

Thanks!
 
I did all what you said but it doesnt work. Is it because I'm using join tables ?
I've been using it on a joined table and it's working fine (even after updating to Joomla 3.5, Fabrik 3.4.3, and php7 last week) . Although it doesn't have repeat groups. But I don't see how that should matter.

It might be an issue with your template. This was tested using the default Joomla Prostar and Fabrik Bootstrap template. What templates are you using?

There may also be an issue with some list plugins that I haven't used/tested. Are you running any list plugins - or allowing any user-defined stuff like filters, grouping, search, or sorting? That would all affect this too and you'd have to either disable those options or make some changes to handle any of that.

Open your browser debugging console and attach a screen capture of at least the top part of the list (including any headers above) and the debugging console with any javascript errors shown - and maybe I can pinpoint the problem.
 
Last edited:
We are in need of some funding.
More details.

Thank you.

Members online

No members online now.
Back
Top