Styling Q-Select height?

FascistDonut

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

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.

FascistDonut

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.

muzammil_76

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

tranmani

@muzammil_76 wanted to know this as well

metalsadman

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

tranmani

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