Q-Select -> Force options to open below field

[Scott3730]

Hi,

I’m having an issue where if my q-select menu is on the lower half of the screen, the options open upwards. I have important information above the field that should not be obscured. Instead of opening a menu that can fit 20 items above the field, i’d like to force it to open a menu that can fit 6 items (or stretch to the bottom edge of the window) below it. There are around 100 options in the menu total.

I’ve spent the last day playing with the menu-anchor, menu-self and offset props, but I haven’t found a way to force the menu to open downwards.

Thanks for the help

[s.molinari]

Have you tried selecting the behavior of menu? With that, you can then select where the menu should be placed (menu-anchor, menu-self, menu-offset). I believe though, the menu will still go up, if the amount of screen available isn’t enough. You can try it though.

Scott

[Scott3730]

Thanks for the response! Yes, I did experiment with those.
I believe they work as expected, but as you mentioned the menu can still open upwards - which is the problem. As an alternative solution, do you know of a way that i can limit the height of the menu? I don’t seem to have access to the menu itself with CSS, just the form control and the individual options.

[s.molinari]

Unfortunately, I don’t myself. Maybe @Allan-EN-GB or @Hawkeye64 have an idea.

Scott

[Allan-EN-GB]

You need to set the popupContentClass against the QSelect, that will then allow you to target the menu / options.

[Scott3730]

Thank you so much! I don’t know how that escaped me!