How can I use tablesorter with resizable widget in a div with overflow scroll?

[kermit-the-frog]

Hi,

I can't get tablesorter with resizable widget to work if the table is inside a div with overflow scroll. Resizing the columns is limited to the original size of the table, but I want the table to expand.
See: http://jsfiddle.net/Kermit_the_frog/9tgqyLqx/3/

Is this a known limitation?

Kind regards,
Martin

[Mottie]

Hi Martin!

You can't directly resize the table header when it is wrapped with overflow auto & set to auto width. To make it work, you would need to also resize the table.

I updated the resizable widget in this demo.

You'll notice these issues:

• Mouse movement does not track well with resizing, especially the last column.
• There is no way to set an initial width of the cells... setting either the widthFixed or resizable_widths options makes it so all cells resize while attempting to resize just one cell.

If you can live with these limitations, I'll push the changes to the working branch. If not, maybe we can mess around with the code a bit to make it better.

[kermit-the-frog]

Hi Mottie,

thanks for your help.

Setting resizable_widths is an important feature for me, so I'd really appreciate if you'd resolve that issue.

I've tested your demo with several browsers and several data and discovered some more issues:

• resizing a column to a smaller size still affects the size of the whole table, even tough the cell already stopped resizing because it reached some kind of implict min size
• header cells don't have the correct overflow and do not scroll or scroll with delay (IE 7)
• mouse button release events are only detected, if the mouse is still in the same iframe (IE 11 / latest chrome)

Kind regards

[kermit-the-frog]

Hi Mottie,

• I've solved some issues here
  • Issues known before:
    • "There is no way to set an initial width of the cells..."
      -> solved by setting table-layout: fixed and forcing the browser to respect the widths by calling $(table).width($(table).width()); at the end of ts.resizableReset
  • Issues I've found during solving the "initial width" issue
    • resetting the col widths does not reset the table width to initial width
      -> solved by saving css-width of the table before adding the widget and restoring it in ts.resizableReset
    • overflow detection does not work with overflow: scroll, overflow-x: scroll and overflow-x: auto
      -> solved with a more complex if-statement
• Updated information on still existing issues
  • "resizing a column to a smaller size still affects the size of the whole table, even tough the cell already stopped resizing because it reached some kind of implict min size"
    • the resizing of the table does only affect cols without an width assigned to them. Any col that as been resized before or has a value from resizable_widths is not affected
      -> workaround: set a value in resizable_width for every col
• New issue
  • any col without a value in resizable_width may be shrunken to size 0 on initialization if the sum of the all resizable_widths (plus the borders, paddings and margins of the columns) is smaller than the width of the table (either explicitly by setting css width for the table or implicitly by the width of the wrapper if the table's css widthis auto)
    -> workaround: set a value in resizable_width for every col

My changes have not been tested without an overflow container.

Kind regards