Freeze columns misaligned when we check the checkbox

Tags: #<Tag:0x00007f8b2b040cc8>

When I freeze the left 3 columns and then select the checkbox some columns get misaligned. If we do it without freezing the columns the issue is not there. or I need to scroll the table through mouse some little bit, after that it get fixed. Can you please suggest me what to do.

Hi @shaikhirshad

I can see that you are using some custom styling - this might be the cause of misalignment. This can also be a matter of turning on the autoRowSize. However, I would need to test the code myself. Can you share a demo?

Thanks for reply,

yes, autoRowSize is true in my code. Yeah, may be issue with my custom styling. Is there any way to trigger the scroll event in handsontable. When we scroll the mouse little bit the issue get resolved, do you have any idea on it? Please find the demo: https://jsfiddle.net/imsij/grh41kyb/7/

I have observed a strange behavior. When I want to select a checkbox table scrolls uncontrollably. I will investigate that case and come back to you later today (in latest tomorrow).

Sure, no problem.

Thanks

Hi @shaikhirshad

The issue related to the scrolling was caused by overwriting the CSS classes of Handsontable elements. Here’s how it works when we remove those styles

bien

To give you a way to style them in a way they won’t break the scrolling I would remove border: none values and use border: 1px solid #fff instead. That should also fix the misalignment but if it won’t please update me.

Hello, it didn’t worked. Please find the attached screenshot. Rows misaligned yet, and I think issue is only for lower rows. For upper rows, I didn’t found any issue

Hi @shaikhirshad

here’s a table without the styling attached to the checkbox https://jsfiddle.net/AMBudnik/equ46fhg/
do you get the same issue there?

ps. we do not allow to change position related settings to Handsontable elements (like ‘position’, ‘display’, ‘z-index’).

Can you tell me what exactly you’d like to achieve with those settings?

No, I didn’t get issue when I remove the custom styling for entire table. Its working fine without custom styling. I’m using the custom checkbox like this, that’s why I have applied position. Do you have any idea how can I fix this?

image

Handsontable never added an ability to style checkboxes. I can add a feature request for that, as currently we add some styling dynamically in the JS file and it is not possible to overwrite them without making changes in the source code.

Actually we though about introducing themes after we add a full support for WCAG 2.0, and support for WCAG 2.0 is planned for Q3/Q4 2020.