Styling Q-Select height?

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

  • @FascistDonut you can snip it, open inspect, click on select, right click on one of the options. anyway here is what the css. {
        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 and looks like they are of the same height as to what you’ve initially wanted.

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

Log in to reply