[GH #3118] Table not rendered correctly

Tags: #<Tag:0x00007fd2ce5399d8> #<Tag:0x00007fd2ce539848>
#1

Hello, my app consists of multiple tabs (Angular Material) and multiple instances of ‘hot-table’ (bound to different data sets).
While all data appear correctly in all tables, I’m experiencing two issues with rendering:

  1. Gridlines are not rendered around some cells.
  2. Table with column type=“checkbox” is rendered with displaced rows (every row is offset by increasing number of pixels). Easily visible on the attached screenshot: row #12 is not aligned with its row header.

Table2
Table2.JPG1392×454 82 KB

#2

Additional information: data rows are not aligned with row headers only when using option:
[label]="{position:‘after’,value:‘ignore’}"

#3

Hey @igort

will you be able to share a demo where the issue can be repliacable?
I would like to test it on my device.

#4

I have put demo to: https://stackblitz.com/edit/hot-tab-demo51

Notes:

  • everything is rendered properly on StackBlits.
  • Windows10 / Chrome: grid partially rendered and misaligned (
    Capture
    Capture.JPG1134×453 81.6 KB
    )
  • Windows10 / Edge / IE11: grid in rendered properly but misaligned.
#5

I have the same result on Chrome 77 if I use the 125% zoom (unfortunately a known issue). Especially when all the newer devices that work on Windows set the 125% as the default value so some of the users even do not know it’s there.
Please check this topic https://github.com/handsontable/handsontable/issues/3118
I will update you as soon as we get this one fixed.