[GH #1933] Columns overlap when using loadData

Getting help Issues
,
1

Hello,
I want to use handsontable combined with hyperformula to automatically perform some calculations when data are loaded. I decided to split my table in two to enable saving the data in a JSON file: the left side to fill in data and the right side for formulas.

My issue is that the columns overlap when I scroll vertically on my page after loading data. This issue only appears when I have more than one handsontable on my page.

image
image285×154 2.23 KB

Here is a simple example that reproduces my problem on JSFiddle: Edit fiddle - JSFiddle - Code Playground

I can’t find what I’m doing wrong, I hope someone will find a solution.

Thanks in advance.

2

Hi @a.barnabe

Thank you for contacting us. I am unable to reproduce this issue. I tried with several JSON files and I can’t load the data at all Can you please send the file you were working with?

3

Here is the content of the JSON file I use:

{“handsontable”:
[[[10,20,30],[15,25,35],[120,22,53]] ]
}

4

@a.barnabe

I tried with those data but I still can’t load the file. Can you please send the actual file?

5

I can’t add a JSON file here but you can find it in this wetransfer link: https://we.tl/t-TG4z75SHqu

I am surprised that you cannot fill the table with the text I pasted above…

6

@a.barnabe

Thank you for the file. Now I am able to load the data, but I can’t see the same issue you described. The table looks fine:

image
image397×338 10.2 KB

7

The tables look fine for me when I load the data. The overlap occurs when I scroll down the page. Did you try? I can produce this issue with the JSFiddle I send you.

8

This is the table’s headers when scrolling before loading data:

image
image828×264 4.86 KB

And here after loading data:

image
image835×256 5.1 KB

9

@a.barnabe

Yes, I tried with the scrolling and it still looks fine. Can you please tell me what browser you use, and do you have any browser or OS scaling turn on?

10

I am using Mozilla Firefox and Windows 10 Pro. I just tried with Google Chrome using the JSFiddle and the same issue occurs…

11

@a.barnabe

I was able to reproduce it and find the reason. It appears that when the same HyperFormula instance is used in two different instances of Handsontable it wrongly recalculates the table dimensions on scroll. You can check that in your example when you comment out the formulas configuration or define two separate instances of HyperFormula, load the data and scroll everything will be rendered correctly. I will report it internally for further investigation and let you know once it’s fixed.

12

Ok, I will try to fix the issue by creating one instance of HyperFormula for each table.
Thank you for your help!

13

I tried to create a function that generates a new instance of HyperFormula and provides it as input for the engine option. This solution doesn’t work. The formula in the handsontable returns the error #REF!. It looks like the tables don’t communicate with each other if they are not in the same instance.

14

@a.barnabe

Yes, they need to operate on the same HyperFormula instance level, just different sheets. That’s why this bug has to be solved in our codebase. I’m afraid there is not workaround for this, but if I find something I’ll let you know.

15

Hello, I don’t know if this helps, but it seems that resizing the web page window allows the table’s columns to retrieve the correct dimension. It even works when resizing the result window in JSFiddle.

16

@a.barnabe

Yes, this, or opening and closing the cell editor, but either way it’s a bug, so we have to solve it on our side.

17

Hello,

Is there any update on this issue? Can you provide an estimated waiting time for the problem to be solved? I really need this functionality for my project.

Thanks in advance.

18

Hi @a.barnabe

Not yet, I will update you as soon as it is fixed.

19

Hi @a.barnabe

I have good news. We re-checked the issue with Handsontable 15.1.0 and it seems that it’s no longer replicable. Can you please check and confirm?