UI breaking with fixedColumnsLeft and different colwidths

Questions
1

Hi,

I tried solution suggested by ‘aleksandra_budnik’ for the issue Handsontable is a JavaScript data grid that looks and feels like a spreadsheet - Available for React, Angular, and Vue .
It works for normal rows, but for headers with large data and ‘white-space: normal’ property row mismatch is still there.
I was not able to show full header text because by default wrap property is set as no for handsontable. Please suggest solution by considering cases as to show full header text with fixed columns and different column widths.

Please refer Handsontable example - JSFiddle - Code Playground for the reference.

Thanks

1 Like
2

Thanks for sharing @tmoore
You are right there is a problem with column headers

issue-fixed-headers.png852×451 22.6 KB

Thanks for sharing.

3

Thanks Aleksandra
Any update on when the issue will be fixed?

4

Hi @tmoore
we have a pretty similar issue posted on our Github board https://github.com/handsontable/handsontable/issues/3476 but unfortunately there’s no fix yet.

5

When is a fix expected? This is killing us and we’ve been waiting for 6 months for a fix. Is it possible to pay for a fix so that your team can dedicate some developer time to it?

6

Hi @tmoore
I am really sorry that it takes so long.

I have asked one of our developers to investigate this case and check if there is any workaround and if there’s none how long it will take and how to fix this issue.

7

Hi @tmoore
We made some changes in the last version 1.8.2 can you check does it fix the problem occuring in your code?

8

Hi Aleksandra,

Checked it with latest version 1.8.2, issue is still present.

Pasted image1366×768 144 KB

9

When it comes to the with in the last column it can be fixed my adding:

viewportColumnRenderingOffset: 50

where 50 represents number of columns.

demo: http://jsfiddle.net/handsoncode/hn2ca308/1/

10

Tried last suggestion, issue is still present:
http://jsfiddle.net/5rbsn3k4/5/

11

That’s an interesting case:

I guess the example works when we comment height for the .handsontable td element: //height: 22px !important;

12

Hi Aleksandra,

Tried solution suggested by you.

White-space property is set to normal for ‘th’ as used in previous fiddle(http://jsfiddle.net/5rbsn3k4/5/).
I observed that - height for ‘th’ is internally calculated, which is set for ‘1st th’ using inline css. If I have hidden column with large text - height is calculated depanding on that, which is not required. Because it unnecessarily increasing height of headers. To avoid all this issue I have added height:22px !important.
Please suggest solution to solve both the issues.

Please find jsfiddle with mentioned issues and hidden columns -
With heigth set - http://jsfiddle.net/yxd17fp4/2/
Without height - http://jsfiddle.net/yxd17fp4/3/

13

Hi @tmoore

sorry for a long delay. I did not get a notifier for your last reply.

Do you still face this issue? If so please share a demo with your recent progress.

14

Yes, issue persists. Is the jsfiddle not sufficient?

15

Hi @tmoore

Can you check if the issue is still present in version PRO 1.10.1? I was testing it with autoRowSize: true as didn’t get the same issue as before.

16

Tried latest PRO version. Issue is still present.

17

sorry that I am asking you to test the next version (as it was with 1.8.4) but this time I am not able to replicate the same issue.

19

As you said, its fixed in 1.8.4 that means fix should be there in 1.10.2. I tried it with 1.10.2 issue is still present.
fiddle link - http://jsfiddle.net/5rbsn3k4/6/

20

Thank you for confirming @tmoore
I am really sorry that the issue is back. I hope it will be fixed soon.

I have shared the issue via Github https://github.com/handsontable/handsontable/issues/4232 to our devs

21

Any update?