Weirdly shrinking table!

[bakertony]

Hi, please visit:
http://jsfiddle.net/HEFUj/2/
then resize the width of the window or bottom right frame until the spread needs a horizontal scroll-bar.
The whole spreadsheet then seems to slowly shrink up vertically until it disappears! Happens on IE10 and Chrome.
What's causing this and how do I stop it?
My ultimate goal is to put the spreadsheet in to a jQuery tab and have it resize properly.
Tony.

[ravio]

This ia amazing! :D

[warpech]

Hmm, I just reworked the window resize callback but never saw this in my tests. I will look into it.

As a workaround solution, comment out this code:

$window.on('resize', function () {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(function () {
    var lastContainerWidth = that.containerWidth;
    var lastContainerHeight = that.containerHeight;
    that.determineContainerSize();
    if (lastContainerWidth !== that.containerWidth || lastContainerHeight !== that.containerHeight) {
      that.wt.update('width', that.containerWidth);
      that.wt.update('height', that.containerHeight);
      that.instance.forceFullRender = true;
      that.render();
    }
  }, 60);
});

[warpech]

Actually I can't reproduce this on my localhost. Any ideas what I need locally to reproduce it?

[bakertony]

Hmm, have you used the same external resources as are used on the jfiddle page?
Resized to make window smaller than the spreadsheet?
To me, it looks like some jQuery animation gone astray...

[bakertony]

Here's another interesting one, with this one, widen the spreadsheet area horizontally then shrink it back up. Notice how the spreadsheet slowly shrinks back to the correct size, rather than immediately resizing. I guess the problems are related, although this problem shrinks up to the right size rather than going too far:
http://jsfiddle.net/TLveq/2/
Tried on Chrome and IE 10, same problem.

[myisis]

I think the problem is that you don't take into account the scroll bar height when setting the new height of the container.

 if (lastContainerWidth !== that.containerWidth || lastContainerHeight !== that.containerHeight) {
    that.wt.update('width', that.containerWidth);
    that.wt.update('height', that.containerHeight);
    that.instance.forceFullRender = true;
    that.render();
  }

lastContainerHeight !== that.containerHeight differs by exactly 10 pixel which is the height of the bar. Since render() somehow calls resize again, every time it is getting called another 10 pixels are missing, thus the table is shrinking.

[warpech]

The problem is that the example is using scrollbars in an undocumented and untested way... overflow: scroll was tested only with defined height:

<div id="exampleGrid" class="dataTable" style="height: 400px; overflow: scroll"></div>

See that it works in that case: http://jsfiddle.net/HEFUj/3/

Anyway, I will try to fix this soon. At least now I know how to reproduce it. @myisis is quite right with his understanding of the problem

[bakertony]

Cool, will look forward to a fix!
I was wanting handsontable to automatically size according to an area in the browser window. I.e. user re-sizes browser, table re-sizes accordingly.
Cheers,
Tony.

[warpech]

This issue should now be fixed in Handsontable 0.8.16. Could you please upgrade and test if it works for you?

[warpech]

I still see some issues in this example http://jsfiddle.net/HEFUj/2/, though different ones :)

I reopen this ticket for a while to investigate further

[warpech]

Closing. This issue is fixed in 0.8.16 and 0.8.17