When table is horizontally/vertically scrollable, header doesn't function correctly

[MaestroJurko]

[MaestroJurko]

        var tableGrid = jqElm.find('.BigTable-Grid');
            tableGrid.stickyTableHeaders("destroy");
            tableGrid.stickyTableHeaders({ scrollableArea: $(".BigTable-Scroller")[0]});


    <div class="BigTable-Scroller">
        <table class="BigTable-Grid">

[MaestroJurko]

ok, a quick fix, used transformX instead of left position. try to use transformX, transformY, because that works much faster and you dont have to do any kind of calculations.

but it still doesn't look good. there is still overflow and the clone isn't the same when scroller is on top.

[jmosbech]

Thanks. The transform idea is nifty.

Do you have a running sample demonstrating the issue (including browser details)?

[SergeTiger]

Hi, just posted "running example" with issue #1 - looks like it is a duplication of this one. Or at least related.

[jmosbech]

Thanks for the example. I don't know when I have time to dig into this, but at least now I have something specific to go for.

[cdfre]

newLeft = offset.left - scrollLeft + base.options.leftOffset;

In Line 139 is problematic for horizontal scrolling in a scrollable area

offset.left is the current offset of the element and therefore scrolling is already included in it.

newLeft = offset.left + base.options.leftOffset;

Works fine for scrollable areas (without the -scrollLeft)

[jmbeach]

@cdfre is right. I changed the code to match his and the headers align correctly in a scrollable area.

[TeodorKolev]

Does that issue resolved, or still not?

[ethanbeyer]

Has horizontal scrolling been fixed due to @simon04 's commit, or no?

[MartinGian]

What about this issue? This is fixed? I'm having the same problem with horizontal scroll bars. I tried the change of @simon04 but nothing changes.

[MartinGian]

@ethanbeyer Did you find a solution for this?

[ethanbeyer]

@MartinGian I did not, no...

[gabazureus]

Hey guys, I made some changes in the solution provided by jpeck in this link https://github.com/jmosbech/StickyTableHeaders/issues/1 (and applied the fix said by cdfre here in this topic) and It worked here in my case.

Here is the new solution (stressed with data) http://jsfiddle.net/2oeuvzLz/

I basically substituted all the ".width()" to ".outerWidth()" and It worked fine

[zhanghuanchong]

@cdfre It's in line 157 in the latest version. Works like a charm! 😆

Now the only problem now is that it will run out of the edge...

[maxlibin]

@gabazureus there is a resize problem, this should fix it

    base.updateWidth();
    base.toggleHeaders();
    base.$container.scroll(base.toggleHeaders);
    base.$container.resize(base.toggleHeaders);
    base.$container.resize(base.updateWidth);
    base.$window.scroll(function() {
       base.toggleHeaders();
         if(base.isCloneVisible) {
           base.calcNewHeaderPosition();
          }
     });

     $(window).resize(function(){
        base.parentClientWidth = base.$container.outerWidth() - getScrollbarWidth();
         base.updateWidth()
     });

[simon04]

I might be worth looking for alternatives: https://mkoryak.github.io/floatThead/

jquery.floatThead is a floating/locked/sticky/fixed table header plugin that requires no special CSS and supports window and overflow scrolling.

Its demo shows a table with vertical+horizontal scrollbars.

[amadeuszi]

My pull request #149 fixes the issue . Adding a clipping container fixes the isssue, and I fixed horizontal scrolling

[hamikm]

Finally found a fix that works for me.

My app contains a wide table in an overflow-x: auto container. Including only $(#table_id).stickyTableHeaders(); floats the table header correctly as I scroll my whole document vertically, but it doesn't scroll the header when I scroll the table container horizontally.

I pulled #149 and used its jquery.stickytableheaders.js, but it didn't fix my problem. I also tried simon04's alternative, but it didn't work either. Neither did the code snippets from bbearche and ghost in #122.

My solution was to just re-float the header when the table's container is scrolled horizontally. Worked like a charm. Not sure if this matters, but all style attributes on my table container and its children are in classes.

const $table = $('#table_id');
const $tableContainer = $('#table_container_id');
$table.stickyTableHeaders();
$tableContainer.scroll(function() {
    $table.stickyTableHeaders();
});