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

Tags: #<Tag:0x00007f8b1d316b68> #<Tag:0x00007f8b1d316a00>
#1

image
image.png2527×1186 400 KB

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.

#2

Hey @sai

have you tried to use autoRowSize: true settings?

#3

Yes. I tried with autoRowSize, but no luck.

#4

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.

#5

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’

#6

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

#7

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.

image
image.png1081×875 71.5 KB

#8

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

#9

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

image
image.png946×604 21.7 KB

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