HOT instances on an initially hidden tab don't render until clicked

Tags: #<Tag:0x00007efc7290fbd0>
#1

I’m using 0.37 with the vanilla .css in a Bootstrap V4 context. I create multiple HOT instances on a set of tabs implemented using Bootstrap nav elements. The HOT instance on the default tab renders just fine, but on all the hidden tabs, only the first column is rendered. A click makes all the other columns show up.

As per this issue, a call to hot.render() also makes the other columns show up. Is this expected?

#2

Hi @srhaque

Can you share a demo or a quick recording?

#3

Sure. Here is the Django form as initially rendered. There is no HOT instance on the “front” tab:

Now, I click on the next tab to bring it to the front, thus exposing a HOT instance. Notice how only one column is shown:

If I click on the HOT rendered areas (for example, on the “Timestamp”) header, or add the manual call to hot.render(), the other columns render:

FWIW, this is the call to hot.render() as mentioned in the other query:

$('a[data-toggle="tab"][id="' + pane + '-tab"]').on('shown.bs.tab', function (e) {
    setTimeout(hot.render, 50)
});

I should clarify the above is with a custom .css. Using the vanilla handsontable.full.min.css makes no difference.

#4

I have seen this issue before. This is the issue when the hot.render() does not do a thing but editing does. Have you tried to build the table after the tab is opened? Or you cannot destroy and recreate an instance?

#5

In this case, the hot.render() does function as a workaround, by causing the missing columns to show up, but my point is that I’m not sure why I need to use it. I would expect that when the tab is exposed, HOT would render itself as needed without needing me to call hot.render().

Further, the workaround I showed of an “on” handler for the ‘shown.bs.tab’ event emitted by Bootstrap is very obscure.

I raised the issue because (a) it was very painful to diagnose, (b) finding the hot.render() hack was difficult, and © the Bootstrap on(‘shown.bs.tab’) trigger even more painful to find. All three were needed for the workaround!

#6

The table hasn’t been made with a clue that it will be held in the tab. It may sound weird as what is the difference? When you place an instance on the tab and it is hidden - then the Handsontable doesn’t know how much space it has to render. That is why it just shows a small part of the table.
When you call the render() method it forces the table to rerender (repaint). Now the table knows the dimensions as the tab is opened and the element (parent) of the table is visible (countable).

#7

OK, I can see that. I guess I would have hoped that HOT would catch the fact it was being exposed and render itself though.

In any event, if this is not regarded as a bug, at least if anybody searches for it, they’ll find the workaround documented here. Feel free to close the issue (or possibly turn it into a docs-only issue). I’ll let you decide, as I have what I need.

Thanks for your kind - and excellent - support.

#8

You’re welcome @srhaque

I’ll close the issue as they still are visible in the forum and crawlable by Google.

#9