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 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.


  • 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.


  • Admin

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

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

Log in to reply