Refresh Handsontable after initializing in hidden container

Tags: #<Tag:0x00007efc6d169368>
#1

Hi! My problem is the following: When a hansontable instance initialized in a hidden container, and after the container become visible, the table stay hidden, because one of the table container has a height: 0.

I was searching any solution, and I found a way: I have to call the handsontable render() method after the container will be visible. This is Ok, but not perfect, 'cause the “.ht_master handsontable > .wtHolder” element still have a style width: 1400px (why even 1400?) and height: 1px.
So, after the calling of the render() method, still I have to set the width and height of “.ht_master handsontable > .wtHolder” to auto.

I would like to ask that is this a bug, or is there any better solution to this problem? I just want to re-initialize or refresh handsontable, but without any change in the settings. What would be the correct way to do this? (Version 6.2.2)

#2

Hi @bb0072

Handsontable would display correctly if you could set up a fixed height and width for it after showing the hidden element. Alternatively, you can also try to use visibility [hidden/visible].

#3

I initialize handsontable with rowHeights array, which contains the exact heights of each row. Even so I experience the above error.

#4

rowHeights relates to row height, but it doesn’t tell the table how many space it has on the website. Does it work better if you add height and width like here https://jsfiddle.net/snpokt7x/?

#5

Thank you, it’s better, but it raises an other question.

I work with many tables on a same page, and this tables haven’t a fixed height. The heights of the tables just depends on the heights of the rows (and the number of the rows of course). For some reason I want to display always the whole table, so I use renderAllRows = true (disable virtual rendering, this is important on my page). But the sum of the row heights isn’t equal to the table height, but smaller than that. I think, this is bacause of the heading row, or the cell borders, but I don’t know exactly why.

How can I determine the full height of the table (before rendering the table), if I know just the row heights and the number of the rows?

#6

each row is 22px-heigh by default. Then you need to add 1px for every bottom border.
Nevertheless, when your data takes more than one line it changes.
Would you be able to send me a demo where this issue can be replicable? Maybe there’s some other way to get this working. I’d just need to debug the code.

#7

I guess that we can close this topic as there’s no reply for more than a week.

#8