How to properly insert a select inside a toolbar?

[rubs]

I’m trying to insert a QSelect inside a QToolbar, but I’m facing some problems. The idea is to allow the user to select one of multiple organizations by replacing the app title (previously a QToolbarTitle) with a select control.

I kinda found a way to do it, but either the QSelect title disappears or its arrow gets pushed to the right of the remaining space. What I want is the arrow to move according to the organization title, like this:

After spending quite some time trying to figure it out, here I’ve created a simple pen to illustrate my problem. In fact the pen is even worse than the actual app because nothing after the QSelect appears in the toolbar. (The app belongs to a client so I can’t share its code, sorry for that.)

Any ideas? Many thanks in advance,

[s.molinari]

If it is just a simple selection, how about using a QBtnDropdown?

Scott

[dobbel]

its arrow gets pushed to the right

the QSelect title disappears

really have no idea what the problem is…

[rubs]

@s-molinari said in How to properly insert a select inside a toolbar?:

If it is just a simple selection, how about using a QBtnDropdown?

Scott

I may try that. However I believe the QSelect should at least work as expected, it doesn’t (see the pen).

@dobbel said in How to properly insert a select inside a toolbar?:

really have no idea what the problem is…

Sorry for the confusion. I’ve added some screenshots from the actual app.

the QSelect title disappears

Here, no title when the QSelect is inserted. It is there, but its width is zero.

its arrow gets pushed to the right

This happens when I surround the QSelect with a QToolbarTitle. Its width occupies the whole remaining space.

What I want is:

Hope it’s clearer now!

[beets]

@rubs I noticed a typo in your codepen:

<q-select v-model="model" :options="options"
           options-dense borderless></select>

You’re closing it with </select> and not </q-select>. When I change it, it seems to work okay for me.

[rubs]

@beets said in How to properly insert a select inside a toolbar?:

@rubs I noticed a typo in your codepen:

<q-select v-model="model" :options="options"
           options-dense borderless></select>

You’re closing it with </select> and not </q-select>. When I change it, it seems to work okay for me.

You’re right, thanks! No wonder it didn’t work… So now the pen works as expected, it does not reproduce the issue I’m having. I’ll try harder, I’ll let you guys know. Thanks again.

[beets]

@rubs No problem, it’s likely some flexbox issue, you could always try using just a <div class="row"> and see what makes it tick.

[rubs]

Whoa, that was fast. Just nailed it down to a CSS problem. The q-select component was inheriting a style it was not supposed to. Again, thank you guys for your help.