[GH #7527] Scroll Appearing on browser zoom level less than 100%

Tags: #<Tag:0x00007efc6493a578> #<Tag:0x00007efc6493a398>

Hi Support,

When we do browser zoom less than 100%, we are facing scroll in HandsonTable body. When we scroll down there is alignment issue between row headers and columns. Please find the settings of my grid below. I have also attached the screenshot for your reference.

const settings: Handsontable.GridSettings = {
height: ‘auto’,
columnHeaderHeight: 40,
renderAllRows: true,
rowHeights: 40,
stretchH: ‘all’,
viewportColumnRenderingOffset: 51,
rowHeaderWidth: 200,
preventOverflow: ‘horizontal’,
bindRowsWithHeaders: ‘strict’,
manualColumnResize: true,
manualRowResize: false,
nestedRows: true,
}

afterGetColHeader: (col: number, TH: HTMLTableCellElement) => {
if (col >= -1) {
TH.setAttribute(‘style’, ‘color : black; font-weight:600; white-space: normal !important; text-align: right; min-height: 40px !important;’);
}
},
afterGetRowHeader: (row: number, TH: HTMLTableCellElement) => {
if (row > -1) {
TH.setAttribute(‘style’, ‘color : black; font-weight:600; white-space: normal !important;’);
}
}

Hi @vijayvelchamy.v

We are aware of the problems regarding the UI scaling. It is reported on our GitHub, I will inform you when we start working on it: