[GH #7149] Misalignment problem when scrolling the Handsontable with fixed columns

Tags: #<Tag:0x00007f8b2b7a0fe0> #<Tag:0x00007f8b2b7a0ea0>
#1

My Handsontable has 2 fixed columns and many rows and columns so that we get horizontal and vertical scrollbars. When I load the page with 100% browser zoom, the table is rendered correctly. But when I zoom out to around 75% or less and use the scrollbar to go to the last row/column, I see that the cells are misaligned. Attached the screenshot.

I am using latest Chrome browser on windows machine. Handsontable-pro version 6.1.1. I am guessing that this issue is only on windows machine.

This issue is reproducible even with the sample Handsontable mentioned on the Handsontable website at https://handsontable.com/docs/7.4.2/demo-fixing.html

P.S: Adding autoRowSize: true does not resolve the issue

HoT%20issue%20on%20zooming%20out
HoT issue on zooming out.JPG1748×746 115 KB

#2

Hi @oommen.alex

Could you try to set autoRowSize option to a specific amount?

Here is a link to our docs about this feature - https://handsontable.com/docs/7.4.2/Options.html#autoRowSize

#3

Hi @piotr.nowak Adding autoRowSize does not work. I had already referred to your suggested change in RE: Vertical scrolling with some frozen columns gets misaligned

But the issue still exists even in the jsFiddle demo that you created (https://jsfiddle.net/nma9tgr6/) Refer screenshot attached. I have highlighted the misalignment.

image
image.png1920×513 63.6 KB

#4

It’s strange because in FF 78.0.2 I can’t reproduce your issue.
Take a look at the screenshot I attached below :
46

What version of FF do you use?

#5

@piotr.nowak I am using the same version of firefox. Attached screenshot below. But looking at your screenshot’s scrollbar styles, I am assuming that you are using a Mac. This issue occurs on a Windows machine due to the space taken up by the browser scrollbar on Windows machine. Also, there should be both vertical and horizontal scrollbars.

image
image.png1920×848 139 KB

#6

Ok. So we know in which environment issue appears.

But for clarifying, do you use zoom?
If so, without zoom issue still is present?

#7

We sometimes use zoom. Without the zoom the issue is not present (or after zoom if we reload the page, the issue does not occur) Occurs only when we zoom after the page/Handsontable has loaded.

#8

Thank you @oommen.alex

I created an issue in GH - https://github.com/handsontable/handsontable/issues/7149

I will surely notify you about the fix is appears.

#9

@piotr.nowak Thanks !

#10

Hello! I just found a solution for my problem: I just put <!DOCTYPE html> at the beginning of the page and misalignment issue gone for me! Hope this helps someone.

#11

Hi @Wingear

Thank you for providing the solution.

1 Like