No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Q-Select -> Force options to open below field

    Help
    3
    6
    985
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S
      Scott3730 last edited by

      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

      1 Reply Last reply Reply Quote 0
      • s.molinari
        s.molinari last edited by

        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

        1 Reply Last reply Reply Quote 1
        • S
          Scott3730 last edited by

          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.

          1 Reply Last reply Reply Quote 0
          • s.molinari
            s.molinari last edited by

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

            Scott

            1 Reply Last reply Reply Quote 1
            • Allan-EN-GB
              Allan-EN-GB Admin last edited by Allan-EN-GB

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

              1 Reply Last reply Reply Quote 3
              • S
                Scott3730 last edited by

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

                1 Reply Last reply Reply Quote 1
                • First post
                  Last post