Some rows in the handsontable are hidden inside the div

Tags: #<Tag:0x00007efc61b98908>

Hi,

The last rows of the handsontable are getting hidden inside the div.

For eg, in the attached image there are 1000 records. But it some of the rows are hidden inside the div. As per our design, we are not setting fixed height and not using scroll.

But since some rows are hidden, the users find it difficult to view the last set of rows which are hidden inside the div.

Is there a way to fix this issue?

Thanks,
Karthik.

Hi @kvengadachalam

Could you share a demo where this issue is replicable? I am not sure if I fully understand what is your setup.

Hi,

I am unable to reproduce the issue with a demo code.

The table if fine with x and y axis scrollbar. But in our application, when we are using scrollbar, the performance is very slow on Save into the table.

So, we found a workaround to remove height: ‘auto’ & width: ‘auto’ which basically considers overflow as hidden. By doing this, the issue got resolved. This also fixes performance related issue and improves the performance.

But, one major thing that we face is that the header is getting floated on page scroll, which is actually getting flickered and whole table seems to be flickered on scroll for huge data, which is quite disturbing.

Added the JSfiddle for the flicker issue here: https://jsfiddle.net/yhcbLu1r/1/

Is there any possibility to disable floating header and not to define width and height?

Disabling floating header will be of great help to solve our issue.

Thanks,
Karthikeyan

Hey @kvengadachalam

settings up a fixed position for the parent helps https://jsfiddle.net/85ryL49g/ but then you need to add height/width. Those can be obviously calculated based on the size of your viewport. But still, without them the solution won’t work.

Okay. Understood. We’ll try this out in our app. Thanks for the update!