Q-Select -> Force options to open below field
-
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
-
Have you tried selecting the
behaviorof 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
-
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.
-
Unfortunately, I don’t myself. Maybe @Allan-EN-GB or @Hawkeye64 have an idea.
Scott
-
You need to set the
popupContentClassagainst the QSelect, that will then allow you to target the menu / options.
-
Thank you so much! I don’t know how that escaped me!
