Row headers out of line with rows

I’ve got a slightly frustrating issue where my rows are out of line with the row headers if the row is double height due to the content, my dropdowns affect the height of the row depending on what the selection is but for simplicity of the example I’ve hardcoded the data. The issue appears in the browser (both FF and chrome) but not in JSFiddle, I’ve had to use Plunker in order recreate the error. I’ll put a link to both as it may help

Any help or ideas would greatly appreciated.

https://jsfiddle.net/garethrwilliams/d8hgs05t/18/

https://plnkr.co/edit/T2HVajf5ei24Nx8i

I am not sure if this response helps, but check it out as well.
I had the same issue when working with my project. What I figured was my Javascript was messing up the way in which my data was being represented using CSS. So I erased the JS (just the particular resize and active function) and used a different approach to do it and it worked fine.

Just check if you can change the way your defining the table functions.

I don’t think it’s the JS as there is the minimal JS included and no functions. I thought I’d work around by adding an extra column at the start of the table which sizes correctly but as soon as I add fixedColumnStart then the error reappears, so it must be something to do with the freezing of the first column…

Example

Are you able to remove the part where the lines are auto adjusting their heights?

As far as I can see the width is the only dimension that I am adjusting is the width?

I am not sure if you are declaring anywhere else that the table takes autoWidth and auto Line height. Just disable them in the handsontable definition.
try
autoColumnSize: False

I feel that majority of your problems are arising because the table is just auto adjusting line height after some time. I would first try to fix that.

Definitely something to do with that as

autoRowResize: true,

makes it worse, I’ll have a play and see if I can find a solution.

Thanks for your help.

1 Like

Hi @gareth.whitefluffy.c

Plunker demo is a bit off for me

but it is clearly altering font size in compared to JSFiddle that does not do that

In Handsontable we set it up to 13px while Plunker makes it 16px. If that is the case, then we already have it reported as a bug, that when the font is changed asynchronously table rows are misaligned. We can see it here as well https://jsfiddle.net/xs8qc26p/

Is the fon’t in your project 13px or like in the Plunker demo?