Handsontable does not appear at all in a Bootstrap modal

Tags: #<Tag:0x00007fa98d8d0ef8>
#1

I know that problems while using handsontable in Bootstrap have been already reported, but I think that my case is really new.
I create an handsontable table instance with its (div) container part of a Boostrap modal body. The problem is that it does not show up at all, while the rest of the modal body is there.
The way I found, inadvertantly, to make it visible is to open the Javascript console, which is an opportunity for me to that the table is there and correctly structured and populated.

Thank you very much in advance for any clue.

Browser : firefox 74.0 and handsontable 7.4.2

#2

Hi @michel.caillat

It sounds like an issue with CSS settings of the parent.
Might it use overflow or display CSS settings?
It would be great if you could share a demo where the issue is replicable.

#3

Dear @aleksandra_budnik,
Indeed your questions were very pertinent. I removed a number of overflow and display CSS settings at the different levels of the modal parts hierarchy and the situation is much better; the spreadsheet shows up when the modal appears. It shows up incompletely though, it requires an interaction ( a click anywhere on the spreadsheet ) to get it completely with the headers and dropdown menus. And even then labels and dropdown menus arrows overlap. As if the speadsheet does not “dare” to occupy the available space.
So you see, a real and substantial improvement, thank you !
And still some last progresses to make.
Let me try to write an excerpt of my ( quite complex ) application to use as a demo.

#4

Glad to know we’re on the right track.

Did you consider creating the table after the modal is opened? I believe that the reason the table does not load entirely is the fact that it does not understand the dimensions of its parent.
Once you put the logic of creating an instance of Handsontable to the setTimeout it will run after each of the modal sizing logic.

#5

Hi @aleksandra_budnik,

Sounds like a good idea. Nevertheless I guess that I should apply this creation-when-modal-shows-up strategy since once ( the firsr time ) . Don’t you think so.
Anyway thank you very much for your presence.

#6

the first time

that should do the job, if your modal size do not change.

#7

Actually it does not. I’m going to put this on hold for now and focus on populating the table from events ( clicks on an image to record positions and pixel values) . I’ll come back on this later.

Thank you again

#8

OK, we usually wait 7 days for updates, but you can still create a follow up topic if you’d need more time.
I keep my fingers crossed for further progress :slight_smile:

#9

Thank you for the offer and the good wishes.

1 Like