[stickyHeaders] widget calculates wrong width of headers

[clod986]

Hi @Mottie,
I've done some debugging for you and this is the fiddle to replicate the error. - https://jsfiddle.net/clod986/zsgzt2rk/2/

As you can see, when you scroll down the width is not optimal, and testing different themes it appears to be a recurring problem.

[Mottie]

Hi @clod986!

It looks like the stickyHeaders widget is removing the icon class names added by the uitheme widget... I'll work on a fix.

[Mottie]

Ok, that last update fixed the issue with the icon class names not being added.

I created this demo to show that since the table is inside of a narrower wrapper, the attach to and y-scroll options need to be set:

$(function () {
    $('table').tablesorter({
        theme: "bootstrap",
        headerTemplate: '{content}{icon}',
        widgets: ["uitheme", "filter", "stickyHeaders"],
        widgetOptions: {
            stickyHeaders_attachTo: $('.col-xs-10'),
            stickyHeaders_yScroll: $(window)
        }
    });
});

In that demo, the header still resizes a bit when scrolling down the page, but the really odd thing is if I duplicate that demo locally, it lines up perfectly.

I'll dig into the differences when I get some more free time, but please try out the current code in the mean time.

[clod986]

Alright.
Is there any way to have it attach to the parent element?

Here's what I'm trying, but the stickyHeaders part won't work:

var $table      = $(this);
var $container  = $table.parent();

var $widgets        = ['uitheme'];
var $widgetOptions  = {};

if(!$table.hasClass('no-stickyHeaders')){
    var $random_number  = Math.floor((Math.random() * 1000) + 1);
    var $container_class= 'tablesorter-container-'+$random_number;
    $container.addClass($container_class);
    $widgets.push('stickyHeaders');
    $widgetOptions.stickyHeaders_attachTo = '.'+$container_class;
    $widgetOptions.stickyHeaders_yScroll = '.'+$container_class;
}

return $table.tablesorter({
    sortList: [[0,0], [1,0]],
    theme : "bootstrap",
    widgets : $widgets,
    widgetOptions : $widgetOptions
});

[Mottie]

Instead of using that code and adding a "no-stickyHeaders" class name, do the opposite by adding a widget-stickyHeaders class name to the header.

Adding this class automatically adds "stickyHeaders" to the widgets option. You can modify this class name format using the widgetClass option.

[Mottie]

I'm guessing this issue has been resolved, so I'm going to close it. If you continue to have problems, please feel free to continue this discussion.

[clod986]

Hi @Mottie ,
I wanted to fix the issue of the width but I cannot test it locally (have problems with minifications & widgets already included by default).

Wouldn't this code work to fix the issue (or at least prove to be a correct step)?

resizeHeader = function() {
    $stickyWrap.css({
        left : getLeftPosition(),
        width: $table.outerWidth() > $xScroll.outerWidth() ?
            $xScroll.outerWidth() : $table.outerWidth()
        });
        setWidth( $table, $stickyTable );
        setWidth( $header, $stickyCells );
}