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

Getting help Issues
,
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 Column freezing - JavaScript Data Grid | Handsontable

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

HoT%20issue%20on%20zooming%20out
HoT%20issue%20on%20zooming%20out1748×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 Handsontable is a JavaScript data grid that looks and feels like a spreadsheet - Available for React, Angular, and Vue

But the issue still exists even in the jsFiddle demo that you created (Handsontable example - JSFiddle - Code Playground) Refer screenshot attached. I have highlighted the misalignment.

image
image1920×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
46593×310 3.65 KB

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
image1920×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
12

Any news on this topic ? On some of our tables, we have a misalignment of more than 1 row, which is very error-prone.
Unfortunately, adding <!DOCTYPE html> does not work for us.

13

Hi @gregoire.spiers

It seems that the last version https://jsfiddle.net/hw85bken/ is still working well, except for the combination of 3 factors

  • Brower zoom applied
  • Firefox browser
  • Windows system

This issue hasn’t been estimated yet.

14

On this jsfiddle, I have the feeling that it’s still an issue : when I resize the column E to a smaller size, I get this kind of things (using Chrome and no zooming) :

image
image828×327 8.46 KB

15

Yes, it is. I am sorry if that sounds like it is not. I was making a note about the environment for tests, as it doesn’t seem to be replicable on Apple devices.

16

Hello @aleksandra_budnik . I’m using version 12.3.1.Is this solved? If so, do you know the version where this was fixed?

Thanks.

17

Hi @dsilvgue

This issue is in the backlog. We do not have any updates yet.

I will make sure to notify you once it changes.