[GH-DEV #2900] Auto resize broken in version 16

Hi,

It seems that the DOM changes introduced in v16 broke the built-in auto resize functionality. During debugging I found that the root element (the div with .handsontable class) no longer resizes to fit the parent container - the wrapper divs do. Because of that, this width and height always remain the same, and so isSizeChanged always evaluates to false, and this code never executes.

There isn’t a demo online to showcase the problem, but it’s fairly easy to reproduce in the js/demo example available in handsontable repository: Just remove the hardcoded height of 450, and position the #example div absolutely to take the entire screen with overflow: hidden.

With the above setup, resizing the browser window will not resize handsontable with version 16, but works correctly if you switch to v15.

Please let me know if you need any more details,

Sandi

CC @dhaber

Hi @shrvic

Thank you for reporting the issue and doing the investigation.

I tried to replicate the issue here handsontable (duplicated) - StackBlitz. But I did not get any odd behavior. Could you please specify if you used 16.1.1 (there was a small fix for autoRowSize in the latest patch). If that is the version you tested, please let me know:

  • if you are able to replicate the issue in the demo from Stackblitz I attached
  • what is your OS/Browser setup

Hey @aleksandra_budnik,

The reason you couldn’t reproduce the issue is because of difference in styling. If you add this to your style.css, the issue will appear to you too:

#example1 {
  position: absolute;
  inset: 10px;
  overflow: hidden;
}

In the screenshot below, notice how there is white space left underneath the table after I resized the screen by making the dev tools smaller:

For completeness sake, I use macOS/Chrome but it looks to me like this is not a OS/Browser related issue.

Thanks.

Hm… I am also on Chrome 140/macOS 26.0 and the result is different.

Do you use any browser zoom or system scale? It seems that zooming out 90% and in 100% produces the empty space below the table. But when user reloads the table it is fine.

No, I don’t use zoom.

Please try resizing the view that contains the table. The easiest way to do it is to start with your browser window covering only half of the screen vertically, and then drag-expand the window to full height. The table will have white space below.

Ah I see. Thank you for the details. I will share it with the team.

Our next planning meeting is a week from now so it may take a while but I will update you as soon as we get team’s feedback.