Handsontable: Handsontable render height issue

[abtx]

Description

Handsontable is not updating its height correctly when the render() is called. The table is rendered correctly to begin with, then data object gets content appended to it and render() is called on the HT instance.

The height is updated only after having scrolled a little bit into the new appended content (i.e. inside of the container which behaves like overflow is set to scroll). Only then the table height is expanded.

Appending more data makes the container height incorrect too.

Desired behaviour would have the table container to reflect the height correctly and immediately after the render() is called.

EDIT: it's the wtHider element not sized correctly, and it's height is set explicitly

Steps to reproduce

1. Create a HT with some data
2. Try pushing new elements to your data array
3. Scroll down

Your environment

• Handsontable version: ^0.38.1
• Browser Name and version: Opera 52.0.2871.40
• Operating System: OSX

[AMBudnik]

Can you record the behavior? I guess that I do not understand it correctly.

Here's a demo I've made http://jsfiddle.net/handsoncode/swmfkgnb/ and the video where I track table height.

Also I do not know why you refer to the wtHider. It always has the same height when a new element is added.

Please let me know what I'm missing here.

[abtx]

@AMBudnik I'm using Angularjs and adding more data to the scope variable, which I use for data in HT. Here's a demo:

[abtx]

Another weird artefact I'm getting when scrolling, seems that the render has some issues with HT's ghost table:

[AMBudnik]

I have a few questions @abtx as I'm not able to replicate in on vanilla
Do you use the AngularJS wrapper from https://github.com/handsontable/ngHandsontable?
Do you use the latest Handsontable version 0.38.1 CE/1.18.1 PRO?

[abtx]

I'm not using AngularJS, and using version ^0.38.1

[AMBudnik]

Are you able to send any demo of tests @abtx? That would help us a lot.

[abtx]

@AMBudnik I'll have a look into tests. Are you referring to HT testing?

[AMBudnik]

Sorry, that was a typo.

I meant any demo that we can download or open online and debug. Cause without a code that represents the bug I am not able to do anything productive - only divagate about the issue.

[abtx]

@AMBudnik ah, ok, no problem, I wasn't sure what you meant :) Here's a Surge link for ya :)

[abtx]

I've tried to do hot.getData().push(el); and re-rendering instead of appending to the scope object and re-rendering (as in this example), but that sadly doesn't seem to do the job

[abtx]

It seems that wrapping HT initialisation in a function and running it when new data is appended to the datasource removes the weird on-scroll behaviour, but the height and width of HOT are calculated incorrectly (ie. there's an added white space on both horizontal and vertical axes). The artefacts are still there too.

[AMBudnik]

I have replicated the issue on Safari on OSX on my colleague's device. I have seen this issue before somewhere...

[AMBudnik]

First associated issue can be this one https://github.com/handsontable/handsontable/issues/3433 but the second one that looked the same seem to be missing. I will search for it and pin it up when I find it.

[AMBudnik]

Did you find it working on any version before 0.38.1?

[abtx]

@AMBudnik hi Alex, no, this is the only version I worked with. I've tested on OSX Sierra 10.12.6 Opera 52.0.2871.40, Chrome 65.0.3325.181, Safari 10.1.2 (12603.3.8) doesn't display the table at all, and Firefox Quantum 60.0b9 (64-bit). Is there another HOT version I should try and see if it will work for me?

[AMBudnik]

As I cannot find the issue that had a very similar video for your image

I think that the issue has been fixed, but none of the versions refer to a different scenario. Maybe this one https://github.com/handsontable/handsontable/issues/3204, but it is an old version - 0.23.0

[abtx]

@AMBudnik did you say you did reproduce this issue though? The linked issue might be related but it's different to the one here :/

[AMBudnik]

Yes, I thought that maybe it's a regression.

I'll ask our devs to investigate this issue.

[abtx]

Anyone having this issue please try and test with this CDN.

[meldaravaniel]

@abtx I have this problem, using ng-handsontable, too. Because ng-handsontable isn't being updated anymore, I've had to patch some stuff locally on it, and I'm still researching into whether this issue is caused by ng-handsontable or is actually a handsontable bug. I've upgraded my version of HOT to the latest, just to see if it still happens, and it does, so I suspect it's actually an ng-handsontable problem. Will get back to you when I know more.

[Prahadeesh92]

Handsontable version 7.2.2. Same issue occurs for me. Is the issue fixed?

[waqasnazir1]

Same issue occurs for me. Any solution?

[AMBudnik]

Hey @waqasnazir1 @Prahadeesh92
Can you share your implementation with me on [email protected]?