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.

[Francks11]

I thought yesterday that the fields were responsible of alignment issue.

Today, I have notice that the responsible is colspan.

Scroller widget doesn't like that header first row contains colspan columns, like you can see here with your demo : http://jsfiddle.net/856bzzeL/308/

If I reverse colspan and set to row 2, no alignment issue : http://jsfiddle.net/856bzzeL/309/

Thanks

[Francks11]

I tested a few cases and still encounter some bugs, especially with internet explorer 9,10,11 (problem alignment line fixed column).

The scroll widget is also slower than before the update...

I detail as soon as possible with examples.

[Francks11]

Hi @Mottie, @TheSin-

I give my feedback regarding the latest changes.

Columns alignment issues (Issue 1, 2 ):

Resolved for Firefox, Chrome, Internet Explorer >= 10.
On Internet Explorer 9, there is a small aligment issue, but I can't reproduce it with jsfiddle demo.

Row alignment issues (Issue 4) :

Resolved for Firefox, Chrome.
But not for Internet Explorer.

You can see with my demo here : http://jsfiddle.net/oqfq47fc/52/

Issue 5, 6 :

Resolved for all browser.

NEW ISSUES :

Issue 1

Columns are not well align if fixed columns are not used : http://jsfiddle.net/oqfq47fc/53/

If I used fixed columns with same code, its works : http://jsfiddle.net/oqfq47fc/54/

I can reproduce it with your demo : http://jsfiddle.net/856bzzeL/457/

Issue 2

When we use colspan in header, the columns are not well align : http://jsfiddle.net/856bzzeL/459/

I have the need to have colspan in header columns.

Issue 3

If I use colspan in body, row style is stopped in fixed columns, and not apply to the rest of line : http://jsfiddle.net/oqfq47fc/54/

Issue 4

Since last change, widget scroller is slower... If I have time, I look into widget scroller code, to determine which code is slow. I use it for from 500 to 1000 rows.

Question :

How to prevent vertical scrollbar jump to header when browser is resized? Or when data is updated?

That's all for now :-)

[Mottie]

Ok, I'll look into the alignment issues.

I think the IE row height issue is because the colspan cells are hidden on the scrolling side with nothing to make up the space for it. It would be very difficult to make the scroller widget support colspans that span across the fixed column, so if you know you're always going to have two fixed columns, split the colspan="10" cell into colspan="2" and colspan="8" cells.

The question about resizing and the table jumping to the header can be solved by setting the scroller_jumpToHeader option to false. You might want to also look at the scroller_upAfterSort option if you don't like that behavior either.

[TheSin-]

colspan is not supported, after a long discussion we thought it would be very odd to start with collapse support in scroller and the rest of TS doesn't even support it yet. Please refrain from using colspan, and do not file bug reports due to it.

[Mottie]

Well, you can use colspan in an info-only tbody... anywhere else and the row may not sort as you expect.

[Francks11]

And in header? It can be useful and does not prevent table sort? And other bugs?

[Francks11]

What is an info only tbody? Can you provide me a demo please? Thanks :-)

[TheSin-]

really? then how do I break it? lets say cols 1 and 2 are fixed, and you have row 1 as colspan 10, where do I break it in half? How do it? where does the data go? how do I split it?

I think maybe it's more of a design issue, try caption for that info instead, of a title if you are using scroller widget since it won't scroll off the page etc etc. Heck even tooltips might work depending on the info you are trying to tell the user.

Either way collapse is not support and it does affect it in any cell.

[Mottie]

Headers do allow colspan and rowspan.

The demo you seek in the the documentation, listed under "Sorting with Multiple Tbodies".

[TheSin-]

but if it's in a scroller and you do a fixed col that breaks a span, it will likely break specially in IE. I've HIGHLY recommend against it.

[Francks11]

If I use colspan on header, I set colspan only for not fixed columns. Why it does not work and why its not possible?

[Francks11]

Same question for body?

[TheSin-]

this is a pretty easy fix, I'm working on it, it will only affect no fixed cols.

[Mottie]

@Francks11!

TheSin- will yell at me for sharing this, but I actually need to modify what I was saying before....

Say you have a table with 10 columns, and you have a info-only tbody with a cell set with colspan="10". To make this work with the scroller, and have 2 fixed columns, you'll need to split that one cell into 3 cells:

• <td colspan="2">: visible in the fixed column
• <td style="display: none">: because the scroller widget fixed column will hide the 2 fixed cells - so it hides the colspan="2" cell and this hidden one - this is because the scroller widget does not support colspans!
• <td colspan="8">: the colspans still add up to 10 since we really only added that hidden cell because the scroller is hiding the first 2 cells.

<tbody class="tablesorter-infoOnly">
    <tr>
        <td colspan="2">COLSPAN</td>
        <!-- add extra hidden td because the fixed column set to 2
             will hide 2 cells; this hidden cell is a placeholder -->
        <td style="display: none"></td>
        <!-- this cell will show up on the right -->
        <td colspan="8">&nbsp;</td>
    </tr>
</tbody>

Here is a demo

Ok, @TheSin-, this is the last time I'll mention colspans with the scroller widget 😜

[Francks11]

Thanks a lot @Mottie :-).

Have you try with Internet Explorer?

I see line alignement issue... :-(

oh Internet Explorer...

Add multiple tbody info only to better see the alignment issue : http://jsfiddle.net/1a5yu8yq/25/

Another small effort and it is good :-)

[TheSin-]

Hottie just for notes this is the same issue as firefox, I'm willing to bet the div it showing up even though the scrollbars aren't. again this is just for notes since I can't test this.

[TheSin-]

Mottie you Hottie, or at least my computer things so ;)

[Mottie]

Your computer needs glasses 😛

[Francks11]

Hi @Mottie,

I have already try scroller_jumpToHeader or scroller_upAfterSort and it doesn't work for me. You can try here : http://jsfiddle.net/oqfq47fc/57/

If I resize window, the scrollbar go to top...

These options don't work with fixed column. I have try with your demo and I have the same issue : http://jsfiddle.net/856bzzeL/465/

If I remove fixed columns, its works. There is a bug.

I saw you did commit last night. Normal that issue 1 is not resolved? http://jsfiddle.net/oqfq47fc/53/

Normal that I already have alignment issue with your colspan example with Internet Explorer? http://jsfiddle.net/1a5yu8yq/27/ . Not resolved with last commit?

What is fix with your last commit and what is not fix?

I mention "colspan" for header lol. Have you a workaround to use colspan in header? :-)

[Mottie]

The IE issue has not been resolved. I name my commits as to what they fix. If you don't see a commit that says something like fixes IE issue, then it's not fixed.

[Francks11]

You referenced your commit for this issue 15 hours ago. That's why I ask this question. And on other commit I saw : fix older IE :-)

[Mottie]

I referenced this issue because it has like 8 or 9 issues listed in it; too many, I really just stopped reading them.

[Francks11]

I agree with you, it becomes a bit messy... It is difficult to know what is resolved, what is not resolved...

I close this issue and I create individual issue for issue which is not resolved.

Thanks.

[ilakkuvan]

@Mottie
I am facing alignment issue for chrome also

[Mottie]

Hi @ilakkuvan!

Are you seeing the same issue on this demo page? Everything is aligned for me, maybe you're using an older version of the widget?

[ilakkuvan]

@Mottie
I am using same plugin but i am facing probelm

[Mottie]

Please modify this demo to demonstrate the problem.

[ilakkuvan]

I will check now also same issue

[ilakkuvan]

Thanks a lot @Mottie

[ilakkuvan]

Working fine @Mottie

[ilakkuvan]

@Mottie How to implement RTL .PLease help me

[Mottie]

Hi @ilakkuvan!

Two things are required (demo)

• Add a ts-scroller-rtl class to the table.

  <table class="ts-scroller-rtl">...</table>

  the reason for the weird naming ts instead of tablesorter is because with a class name of tablesorter-scroller-rtl, the code will think you're trying to add a theme named scroller-rtl.

• Whatever element is wrapping the table needs to be set with the css direction:rtl. So if your entire page is set, that is fine. If you only want the table to be set as rtl, then set this css on the scroller's wrapper:

  .tablesorter-scroller { direction: rtl; }

I will make this more clear in the documentation.

[ilakkuvan]

@Mottie I am facing performance issue for tablesorter. Please help me
@Mottie I am using 25 column and 500 rows

Table construction time 2 to 3 sec.

Please provide me better solutions

[ilakkuvan]

@Mottie I am using 25 column and 500 rows

[Mottie]

@ilakkuvan I wouldn't recommend using the scroller widget then; the stickyHeaders widget should work just as well.

[RajuTicvic]

@hi friends
i was using scroller but my table has thead colspan, its not working good
please help me #1662 (comment)