Row misalignment when applying styling to cells

Tags: #<Tag:0x00007efc615f40d8>
#1

I am experiencing a cell misalignement issue when I apply styling (border-bottom of 2px in this case) to cells and have fixedColumnsLeft set.
To see the problem please look at the following fiddle:

https://jsfiddle.net/stuartrichardson/ay0Lpk7z/2/

I have looked through the handsontable code and have found the code that is causing the problems.
In the renderRows function in TableRenderer the following logic can be found:

  if (TR.firstChild) {
      // if I have 2 fixed columns with one-line content and the 3rd column has a multiline content, this is
      // the way to make sure that the overlay will has same row height
      var height = this.wot.wtTable.getRowHeight(sourceRowIndex);

      if (height) {
        // Decrease height. 1 pixel will be "replaced" by 1px border top
        height -= 1;
        TR.firstChild.style.height = "".concat(height, "px");
      } else {
        TR.firstChild.style.height = '';
      }
    }

If this code is commented out the problem disappears.

#2

Hey @srichardson

I’ve added autoRowSize and set it to true https://jsfiddle.net/wgq4ozkh/

Here’s more about the autoRowSize https://handsontable.com/docs/7.1.1/Options.html#autoRowSize

#3

Hi Aleksandra,

Ok… good point. I will research it further.
In the past I have had autoRowSize set to true however I had to remove it as it introduced some other misalignment issues.

#4

I can believe, there are some issues related to autoRowSize.

#5