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

    Styling Q-Select height?

    Framework
    4
    7
    3943
    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.
    • F
      FascistDonut last edited by

      When using QSelect, how can I set the height of the entire control? If I set the height of the label, then it appears to be the correct size, but maintains additional space below it down to where the bottom border is. If I add borderless then visually it looks right, but the space is still preserved and leaves the options offset.

      I can’t seem to inspect the options element or snip a screen shot of it since it closes after it loses focus. Here’s the codepen though. I made the background blue so that it is easier to see the gap between the options and the dropdown.

      https://codepen.io/fascistdonut/pen/vYYNwjV

      1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman last edited by metalsadman

        @FascistDonut you can snip it, open inspect, click on select, right click on one of the options. anyway here is what the css.

        element.style {
            min-width: 300px;
            /* top: 48px;  -->> this here is what's adding space */
            left: 0px;
        }
        

        it’s because you lessened the height of your label that it has space in between the options and qselect component.

        you can use dense prop to make the component’s height smaller as seen here https://codepen.io/metalsadman/pen/PooZZYW and looks like they are of the same height as to what you’ve initially wanted.

        M 1 Reply Last reply Reply Quote 2
        • F
          FascistDonut last edited by

          Oh cool, I didn’t realize you can inspect like that. I usually just have the console open then click the select element icon.

          Dense looks like it should work for me too. Thanks for your help.

          1 Reply Last reply Reply Quote 0
          • M
            muzammil_76 @metalsadman last edited by

            @metalsadman what should I do if I want to make it more smaller ? Do you know the css ?

            T 1 Reply Last reply Reply Quote 0
            • T
              tranmani @muzammil_76 last edited by

              @muzammil_76 wanted to know this as well

              metalsadman 1 Reply Last reply Reply Quote 0
              • metalsadman
                metalsadman @tranmani last edited by

                @tranmani you’ll have to override underlying css, and it will be trial and error from there. default styles are mostly in accordance to material guidelines.

                T 1 Reply Last reply Reply Quote 2
                • T
                  tranmani @metalsadman last edited by

                  @metalsadman thank you for the reply, I just found out about that

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