Sticky columns moving with checkbox selection

Tags: #<Tag:0x00007f24921086d8>


We have a table with checkboxes as the first column, which we use to allow people to select a row to then do an action with. This seemed to be working fine, however, in combination with the sticky columns, we found that if you scroll down to near the end of the table and click the checkbox that the floating sticky columns go out of sync with the table until you re-scroll.

I’ve managed to replicate the issue in this JSFiddle: - The data variable is just so I’ve managed to load in more than the helper normally allows, along with the checkboxes, the instantiation of Handsontable is under that.

If you scroll to the bottom of the table, then to the right, and then click the checkbox in the first column, you should see the issue happen, and the sticky rows will move out of alignment.

I believe it’s based around the autoRowSize feature - if this is removed then when you scroll to the end it doesn’t jump, but the sticky column can end up unaligned with the rows in scrolling, depending on the height of the cell content.

I noted someone with a similar issue post a short while back, although apparently that was to do with styling: Freeze columns misaligned when we check the checkbox

You’re right Dan, the autoRowSize causes the issue. But you can set it to true if you disable disableVisualSelection.

I simplified the example and reported it as a regression issue (from v 7.1.1) on our Github board

I will update you as soon as we officially fix this issue. Thank you for sharing.

Thanks very much :slight_smile:

Hi @accounts1

After a long time, we fixed the issue mentioned above. I hope that you can still benefit from the latest version.

For everyone interested in the latest patch that solved the issue here is the full list of changes.