Force menu to open below

[pvictor]

Hi, Is it possible to force the menu to open below ? When there's no much vertical space, the menu open above and first options aren't visible :

I tried position property without luck.

Thanks!

[sa-si-dev]

@pvictor I will check the possibilities and fix it if it is an issue.

[neonrust]

It seems that, the decision to open upwards does not take into account how much space is available above. That is, if there's not enough space to open downwards (b/c of lack of space) it always opens upwards. Preferrably, when there's not enough space in the preferred direction (the position property), it should check if there's enough space in both directions, and select the one with most space.

I've been trying to utilize the beforeOpen event to do the necessary space checks and then set the position property based on that. But it does not seem possible to set the option? :(

It would also be nice if the menu could be resized to available space (if less than optionsCount fit). This should probably be an option, though.

[neonrust]

And yeah, maybe more on topic, setting position to bottom still opens the menu upwards if there's not enough space below. The opposite is true for setting position to top.

[pvictor]

Any update on that issue ? It's a l ittle frustrating on small screens, here's an exagerated example with the demo site :

An option to force the menu to open in a specific position will solve this for me I think.

[pvictor]

Still an issue for me :pray:

[mmoisse]

I looked into this issue and it seems it is an issue in js code that https://sa-si-dev.github.io/popover/ generates. I managed to fix it by manually editing the js code there, although this is probably not the proper way, and only fixes the issue if you set the default behavior to the bottom. The normal code looks if there is enough space below to draw the option list, if not it draws above. If you change this line

{var L=G[n];"top"===(C=n)||"bottom"===C?E=L.top:"left"!==C&&"right"!==C||(k=L.left)}

into this

{if(n==="top"&&u>x) {} else {var L=G[n];"top"===(C=n)||"bottom"===C?E=L.top:"left"!==C&&"right"!==C||(k=L.left)}}

it will also check if the there enough space above (x) for the option list (u), if so it will draw above otherwise if falls back to drawing below. I hope it helps

[ocelhay]

Any update on that issue?