Sticky Headers Resize

[johngrogg]

When a table column gets resized after initialization the sticky header does not resize to match. This can be seen by making a sample table and then using javascript to modify the text of a table cell to be wider than the cell's original width.

It can be forced by triggering the 'pagerComplete.tsSticky' event on the sorted table, but it would be better if the widget either bound the resizeHdr method to it's own event (so it doesn't feel so much like a hack), or if the widget could simply detect when the original table's columns are resized and then automatically resize the sticky header.

[Mottie]

Hi @johngrogg!

I tested this issue in a few demos and when I change the header text of a cell, the columns don't seem to resize horizontally, only vertically even with the widthFixed option set to false.

Would you please share a demo of this issue (you can use this demo as a starting point). It will help me see the problem and verify that this issue has been resolved while I attempt to fix it.

Thanks!

[johngrogg]

Here's an example of the behavior, scroll to the bottom and click the button.

Also, here is an example that is closer to the situation where I first noticed the behavior. Just scroll down to the row that has Parent_With_Child in the first column and click on the row to display the child row that was hidden.

[TheSin-]

I am also seeing this issue. But to add to the description the issue is the sticky header doesn't resize while visible. If it's hidden when the resize happens it's fine. Or if ti's visible when the resize happens it'll be wrong but scrolling to the top and then back down will reset it and it'll be fine, so something is happening on the hide that helps and it might need to be run even if it's visible.

Hope this helps debug it.

[johngrogg]

Also, just to be clear, calling:

$('#yourtable').trigger('pagerComplete.tsSticky');

Successfully forces the sticky header to resize itself to the current column widths. It would probably be sufficient to just add a resize trigger that is more obvious and allow the user to decide when to force the header to resize, but if it is possible to detect when a table's columns resize due to content changes (or hidden rows being displayed), then the sticky header could auto-resize itself.

[Mottie]

@johngrogg!

I would love to be able to bind to a resize event, but sadly it isn't supported cross-browser (ref). So I need to either add in a timer to continuously check for a resize, or have you trigger an event to do it.

Edit: you can also force a resize by triggering it on the window:

$(window).resize();

[Mottie]

@TheSin- The 20px padding prevents the header text from overlapping the sorting arrow.

Edit: Oh wait, you mean on the table itself? o.O.... odd.

[johngrogg]

I was afraid that would be the case (I was hoping you might know of/find some event binding that I couldn't find).

Like I said previously, an event trigger should be fine. My current solution just felt hack-y enough to warrant an issue.

And @Mottie, thanks for the awesome work on this!

[TheSin-]

Actually I'm very embarrassed as to what was causing it. the 20px isn't required and lets just pretend I never said anything about it at all ;)

[Mottie]

Not a problem! But I think I can do better ;)... the resizer widget already does this, so if I pull out that resizing code and make it public, then both widgets can use it, problem solved.

@TheSin- talk about what? blink

[TheSin-]

I'd love to see where the resize widget does it as I'd like to add it in my columnSelector addon.

[Mottie]

@TheSin- Hmm, ok I'm wrong... maybe I'm thinking of another project that monitors the element size. Oh well, I think it would be a good idea anyway ;)

[Mottie]

@TheSin- Check out the new $.tablesorter.addHeaderResizeEvent function.