Different cell heights

Tags: #<Tag:0x00007efc61a68b50> #<Tag:0x00007efc61a68970>
#1

I have a strange issue when header of rows has smaller height that the row itself. It’s small difference for 1px or less. But the more rows the biggest problem.
I don’t know how to create example code for reproducing but have a video (https://take.ms/DkxtA). I’m not hope to get some code for fixing but maybe has some suggestions.
Has anyone some ideas how to fix that? Or where to look for issue reason?

#2

Hi @denial.trombol

I think that seeing your code would be crucial here. I can already see that you’ve implemented some changes to the overall look of Handsontable. Did you try to disable them and check if the issue persists?

#3

Hi @adrian.szymanski!
I tried to remove all my custom styles but there is still problem. Any other suggestions?
BTW, I’m still using v10.0.0. May it be a reason?

#4

Hi @denial.trombol

Thank you for the update. Since version 10 we improved a lot of things, so yes, you can try to upgrade to the newest one available, which is 13.1.0.

You can also see what has been changes since then in the release notes: https://handsontable.com/docs/react-data-grid/release-notes/

#5

Hi @adrian.szymanski
Update to v13.1 didn’t help. Perhaps I can call some method of some plugin (e.g. ManualRowResize) to recalculate all row heights?

#6

Hi @denial.trombol

You can try with different settings of the autoRowSize plugin. Again, it’s really hard to tell without seeing your code, but it’s worth to give it a try: https://handsontable.com/docs/javascript-data-grid/api/auto-row-size/

#7

No, it’s even worse. Seems that plugin also watching at hidden cols. Therefore it makes rows too high for me.
Seems, my variant will be manual resizing like this:

const manualRowResize = this.hot.getPlugin('manualRowResize');
const rowsHolder = this.$el.querySelector('.ht_clone_left');
if (manualRowResize && rowsHolder) {
  const headers = rowsHolder.querySelectorAll('tbody th') || [];
  headers.forEach((th, i) => {
    const height = manualRowResize.getActualRowHeight(i);
    if (height) {
      th.style.height = `${height}px`;
    }
  });
  this.hot.addHook('afterRowResize', () =>
    setTimeout(this.resizeRows.bind(this), 100)
  );
}
#8

@denial.trombol

I see. So, the solution you provided fixed the problem?

#9

@adrian.szymanski
Actually, no :unamused:
Found out many problems with this solution. I continue to look for solutions.

#10

@adrian.szymanski
Sunday night is a great time, and it gives us such good ideas :sweat_smile:
The reason of my problems was stupid rule of that page root component:

*,
*:before,
*:after {
  box-sizing: border-box !important;
}

So, my problem is fixed. Never do box-sizing: border-box !important for Handsontable :slightly_smiling_face:

#11

Hi @denial.trombol

That’s great news! So it was the alteration of Handsontable core styling indeed. I’m glad that you were able to fix it :slight_smile: I’ll close this topic in this case.

1 Like
#12