stickyHeaders and horizontal scroll

[SilverSilencer]

I tried to use stickyHeaders which works great on normal table, but I have many fields and so I use horizontal scroller (I scroll to left/right), and when I move down and stickyHeaders appear, they are not shown inside that limited width div, but they go over and all fields titles are shown all the time, they are not shown inside limited width div. I tried to use stickyHeaders_attachTo, but I couldn't get it to work.

[SilverSilencer]

I have uploaded demo files and modified it so that table is inside div with 600px width and you have to scroll right in order to see all data. That is all OK, but when you move down and stickyHeaders appear they are placed over all screen instead only inside div with 600px width.

You can see the problem in action here -> http://dirt3.me.pn/

Here is another example with no white-space property and with 400px width - http://dirt3.me.pn/index2.html

[Mottie]

Hi @SilverSilencer!

It looks like a class of wrapper is missing on the div wrapping the table; then set the stickyHeaders_attachTo option to that wrapper (demo):

HTML

<div style="width: 600px;">
    <div style="width:99%; overflow:hidden; height:100%; overflow-x:scroll;">
        <div class="wrapper">
            <table id="table1" class="tablesorter">
            ...
            </table>
        </div>
    </div>
</div>

CSS

 .wrapper {
    position: relative;
    padding: 0 5px;
    /*make this width smaller than the outer div, so the scroll bar is visible*/
    width: 580px;
    height: 500px;
    overflow-y: auto;
}

Script

$("#table1").tablesorter({
    theme: 'blue',
    widgets: [ 'zebra', 'stickyHeaders', 'filter'],
    widgetOptions: {
        // jQuery selector or object to attach sticky header to
        stickyHeaders_attachTo: $('.wrapper')
    }
});

[SilverSilencer]

I tried this but in this case vertical scroller is shown inside div instead on right page for all page. As soon as I make height 100%, header is not attached when I scroll whole page down - http://jsfiddle.net/abkNM/1984/

[RajuTicvic]

@Mottie In http://jsfiddle.net/Mottie/abkNM/1979/ attached to parent not working
why?

[Mottie]

Sorry, I didn't have time to troubleshoot. The "Attach sticky header to its parent" demo on this page does work as expected; even on narrow screens.

[cwisdo]

I ran into this before.

@RajuTicvic that fiddle is set to use the latest jQuery nightly build (jQuery edge) which is throwing errors because of removed functions (e.g., $.isFunction)

If you change the environment to explicitly use jQuery 3.3.1, it will work as expected

[cwisdo]

E.g. Here is a fiddle with the exact same code + jQuery 3.3.1 which works.

http://jsfiddle.net/cwisdo/dt52q6sj/