[GH #3118, #4767]Table alignment mismatch with table data

[sai]

I have a scenario where table data is displaying as per screenshot. But the the first column alignment is not matching with other columns. This is happening in two cases.

1. When we add multiple rows into the table.
2. When we adjust browser zoom .

I am looking for solution that adjusts height of the rows for first column.

Appreciate your help.

[aleksandra_budnik]

Hey @sai

have you tried to use autoRowSize: true settings?

[sai]

Yes. I tried with autoRowSize, but no luck.

[aleksandra_budnik]

Do you use a custom render?
If would be much easier for me to help if you could share your settings so I’l be able to replicate the issue.

[sai]

I have these settings and also you can replicate issue using link: http://jsfiddle.net/cyancscoutrfp/hqLbg3rt/

public settings: Handsontable.GridSettings = {
data: getCarData(),
rowHeaders: true,
colHeaders: true,
manualColumnResize: true,
manualRowResize: true,
manualRowMove: true,
contextMenu: [
‘row_above’,
‘row_below’,
‘---------’,
‘col_left’,
‘col_right’,
‘---------’,
‘remove_row’,
‘remove_col’,
‘---------’,
‘clear_column’,
‘---------’,
‘undo’,
‘redo’,
‘---------’,
‘cut’,
‘copy’
],
stretchH: ‘all’,
className: ‘htLeft htMiddle’

[aleksandra_budnik]

How can I replicate the issue @sai ?

It works well for me on Chrome and FF. Maybe you have some zoom turned on or it is set to zoom in the system

[sai]

Yes. As mentioned we need to zoom in/out the browser. And also if we verify the last row there will be a gap between row header and the table data.

[sai]

I resolved it by using rowHeights: ‘40px’. Adding rowHeights value will adjust row header alignment and it is working when we remove autoRowSize property.

Thanks for your quick response and suggestions @aleksandra_budnik

[aleksandra_budnik]

autoRowSize: true, makes it a bit better for v (7.1.1)

Emulating 125%
left: Handsontable 7.1.1 and autoRowSize: true
right: Handsontable 0.17.0 without the autoRowSize

However the zooming issue is with us since the beginning of the table.

You can track the progress on those issues here

Zoomed out table doesn't look properly in specific situation

Missaligned rows with row headers after zooming