Some issues with scroll widget

[Francks11]

Hello @Mottie,

I encounter some issues with scroller widget... It is difficult do it works with all browsers like Internet Explorer > 9, Firefox, Chrome without alignement issues and without any bugs...

Issue n°1

When I add inputs in header, the head columns are not well align with body columns...
You can see a demo here : http://jsfiddle.net/Francks11/oqfq47fc/1/
The problem appears with all browsers.

Issue n°2

If column data is wrap in several lines, the head columns are not well align with body columns... I have the need that data is wrapped.
You can see a demo here : http://jsfiddle.net/Francks11/oqfq47fc/3/
The problem appears with all browsers.

Issue n°3

If I update a cell in table and data which grow the cell, the head columns are not well align with body columns...
You can see a demo here http://jsfiddle.net/oqfq47fc/4/
The problem appears with all browsers.

I suppose it is necessary to call a method to refresh header, but which? I have look at documentation and the list of possible methods but which methods is most appropriate?

refreshWidgets Refresh the currently applied widgets. Depending on the options, it will completely remove all widgets, then re-initialize the current widgets or just remove all non-current widgets (v2.4; v2.19.0).
updateAll Update a column of cells (thead and tbody) (v2.8; v2.19.0).
updateCell Update a table cell in the tablesorter data (v2.19.0).

I have test updateAll method but its works only first time and next time, the rows of tbody disappears...

I have searched through the documentation, but I found not what I need...

Issue n°4

When I add the fixed columns to previous example demo, it works with Chrome but not with Firefox and IE.

You can find demo here : http://jsfiddle.net/oqfq47fc/5/

On chrome : (OK)

On firefox :

On Internet Explorer :

Issue 5

When we move horizontal scrollbar to right, we can see the moved contents in table border :

You can find demo here : http://jsfiddle.net/oqfq47fc/5/

Issue 6

When we go on the bottom of table, there is a slight alignment issue :

Issue 7

I use qTip2 (http://qtip2.com) for tooltip.

Qtip2 works good with table sorter, except if widget scroller is used.

You can find a demo here, without scroller widget : http://jsfiddle.net/oqfq47fc/6/

You can find a demo here, with scroll widget : http://jsfiddle.net/oqfq47fc/7/

Can you help me?

I have looked in the documentation, but forgive me if it's written somewhere and I have not seen.

Thanks.

[Mottie]

Hi @Francks11!

Thanks for the extensive descriptions and screenshots. I noticed that all the demos are pointing to the scroller widget from the last version. Try changing the link to the scroller widget to this: https://rawgit.com/Mottie/tablesorter/master/js/widgets/widget-scroller.js

This link points to the latest scroller widget code in the master branch which should have fixed some of the above reported issues (I hope).

[Francks11]

@Mottie

Issue 1

Replaced widget scroller. But it does not fix the bug.
Demo : http://jsfiddle.net/oqfq47fc/14/

Issue 2

Replaced widget scroller. But it does not fix the bug.
Demo : http://jsfiddle.net/oqfq47fc/15/

Issue 3

What is the method to called to refresh only the header?

Issue 4

Replaced widget scroller. But it does not fix the bug.
Demo : http://jsfiddle.net/oqfq47fc/16/

Issue 5

Replaced widget scroller. But it does not fix the bug.
Demo : http://jsfiddle.net/oqfq47fc/17/

Issue 6

Replaced widget scroller. But it does not fix the bug.
Demo : http://jsfiddle.net/oqfq47fc/17/

Issue 7

Replaced widget scroller. But it does not fix the bug.
Demo : http://jsfiddle.net/oqfq47fc/18/

The replacement of widget scroller file has no effect...

Can you help me?

[Mottie]

Ok, I'll take a look.

For issue 3, trigger a window resize (I'll look to fix this in the code so it works on update properly) (demo)

$(window).resize();

[Francks11]

Mottie thanks for your help for issue 3.

Have you had time to see for other issues?

Thanks.

[Mottie]

Sorry, there is too much to do with the scroller widget and I want to get the next version out today.

[Francks11]

Okay.

For me, in order, the following issues 4, 1, 2 are blocking and I can't use scroller widget without fixing bugs.

I'll see if I can make my contribution to fix bugs because it's very important to me.

[Francks11]

I resolve issue 7.

The bubbles of Qtip2 doesn't appear because I have attached event on table sorter thead which is hidden with scroller widget.

I use this code after table sorter initialisation to do Qtip works :

    // init table sorter   
    $('#tvar_1').tablesorter({
        widgets: ['zebra', 'scroller'],
        widgetOptions: {
            scroller_height: 300
        }
    });

    // add qTip on header
    var scrollerWrap = jQuery( "#tvar_1" ).closest(".tablesorter-scroller");

    if ( scrollerWrap.attr("id") != undefined ) {

        $( '#' + scrollerWrap.attr("id") + ' th[title]').qtip(); 
    }
    else {

        $( '#tvar_1 th[title]').qtip(); 
    }

You can see a demo here for information : http://jsfiddle.net/oqfq47fc/30/

I now look to fix issue 4, 1, 2 which are very blocking.

:-)

[Mottie]

To be honest, all the columns line up for me. I am not seeing any issues with Chrome or Firefox. In IE, the header is the same width as the body so there is a scrollbar width of extra scrolling that occurs and that needs to be fixed. All the columns do line up though.

I know you said "The problem appears with all browsers" in the original question... which one did that screen shot come from?

Maybe add some css to set the input widths as a percentage, that would ensure that the inputs in the tbody don't distort the table cells.

[TheSin-]

The issue is when using inputs, but it's simple solution of using css to set the input width to 100% and then control the col width with min-width (demo).

.tablesorter thead th {
    min-width: 200px;
}
.tablesorter-header input {
    width: 100%;
}

[TheSin-]

Issue 5 is css, you see it to do cell-spacing, use cell border with a color, right now it's transparent, tell it to use solid white and that will be fixed.

[Francks11]

OK thanks for your help. I will try all tomorow and I get you feedback. :-)

[TheSin-]

here is Issue 5 working

http://jsfiddle.net/oqfq47fc/42/

[Francks11]

Thanks :-). And for issue 4, I think it is input css height issue? (Issue of row alignment on firefox and lE)?

[Francks11]

@TheSin- ,

there are line alignment issues on Internet Explorer (9-10-11) with your demo :

http://jsfiddle.net/856bzzeL/264/

Scroll vertically or horizontally, resize and see :

Scroll again, line is correct align. I think that there is a refresh problem, only on Internet Explorer

Other issue on Internet Explorer 9 :

The horizontal scrollbar is hidden by fixed columns

Question :
Is it essential to specify to fixed columns : white-space: nowrap; to do fixed columns work? I solved issue 4 by setting row height on my table and setting all cells of my table to white-space: nowrap and its works. But I would like to wrap text on fixed columns to save place.