Label not displaying in QSelect if in toolbar

[Isaac]

Hi! I’m attempting to display a QSelect in a QToolbar with a label (<q-select :options="options" v-model="model" label="Test" filled/>) inside a QToolbar

When I do so, the label doesn’t display until I select an option (which may not always be available!)

Prior to selecting something:

After:

Has anyone found a workaround for this issue? Thanks!

[metalsadman]

@isaac the label has same color as your toolbar background, use dark prop on your qinput.

[Isaac]

@metalsadman Dark? It’s not there regardless of the color of the label – in the inspector, it even has 0 width for some reason.

Also, how can I adjust the styling of the qinput despite using the qselect? (assuming thats possible w/o css, anyway) I know you can change the label color of the qselect, but that makes no change until I select an option.

[dobbel]

@isaac

Please create a codepen to demo you problem.

[Isaac]

@dobbel Codepen as follows: https://codepen.io/isaacporter/pen/dyOVOwJ

[metalsadman]

@isaac just set a width on your q-select.

[Isaac]

@metalsadman Is there no way to have the width inherit the largest available option like normal selects? or do I have to generate the width manually(re: automatically) with JS by calculating extents? Seems weird for a UI framework to require that.

[metalsadman]

@isaac check the underlying css.