Are there any relatively simple ways to get the autocomplete to pop up above the cell when it's not going to be visible below it?
I would prefer to not modify handsontable.js or introduce new packages if at all possible.
Right now using the z-index I was able to force it to show over my footer, but I would still prefer it just went up instead of down.
I have looked at https://github.com/trebuchetty/Handsontable-select2-editor, but I'd really prefer to not introduce a new package.
There is a way to do it without a package but that would mean coming up with some interesting jquery logic. What you'd want to do is the following:
Add an event on the dropdown that calculates its height, using the selector.height()
, and adds it to its current position. If this new value is larger than the bottom line on the table, it overflowed, so you want to move it up by calculating the new position and setting it.
This is the fun part. To do this you need to think about HTML coordinates. You have the top left position of the dropdown, and its height. To put it above the cell, the new position would be dropPosition + dropHeight + cellHeight
. Now this is all fine for the first time you render it, but as you scroll, it will go out of whack.
I haven't written this yet but I will probably do so in the future. If you get a fiddle started, we can fork it and try to work out a more concrete solution.