After Edit a cell currentRowClassName will not highlight the current row

Tags: #<Tag:0x00007efc6adcb000>
#1

Good morning
I have a problem with handsontable and currentRowClassName.
Using currentRowClassName I can highlight the whole row for example in yellow.
This work great except in the last rows of the spreadsheet.
Infact if I type a value in the cell C99, then I click in another cell D98 (row above), the i modify again the cell C99 then click again in the D98 cell there is a misalignment of the whole row selected (the yellow row).
Here is a video.

ezgif.com-resize.gif900×546 633 KB

Here is the JSFiddle:
https://jsfiddle.net/crepuscolog/qr509wux/62/

I think could be a problem of refresh, infact if I scroll the window then the hightlight row is correct.
May you help me ?
Thanks
Best regards

#2

Hi @crepuscolog

this demos is more than 1600 rows. Can you simplify it? What is an intended behavior? I believe that for some actions you want the orange background to appear.

#3

Good morning
Try now:
https://jsfiddle.net/crepuscolog/qr509wux/88/

Regards

#4

Type in row 35 coloumn C
The row highlight has some cell highlight in yellow in other row…
Thanks

#5

It looks like a matter of header height.

Here https://jsfiddle.net/handsoncode/52ty7n6p/ is an updated demo (line 655)

#6

Good morning
Thanks so much for the answer.
After insert your advice (line 655: columnHeaderHeight: [150, 50],
I also must comment in the css style the part with the commands height & width:
.outer {
position: relative;
display: inline-block;
margin: 0;
/height: 140px;/
}

    .rotate {
        font-weight: 300; /* not troppo grassetto */
        -moz-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
        -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
        transform: translateX(-50%) translateY(-50%) rotate(-90deg);
        -o-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
        -ms-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
        /*height: 30px; /* 
        /*width: 140px; */
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
        white-space: -o-pre-wrap;
        word-wrap: break-word;
    }

    .handsontable .head-rotate {
        transform: rotate(-90deg);
        /*height: 30px;*/
        margin-top: 1px;
        white-space: pre-line;
        /*width: 140px; /*
    }

Because if these line will still working in case I change columnHeaderHeight in columnHeaderHeight: [150, 15] the problem will come back again…
So now is working good.
Thanks
Regards

#7

Great! Thank you for an update.

I guess that we can close the issue.

#8