Shrink q-select to fit in q-bar

Roger

Using v1.0.0-beta.23 (UMD installation), I’m trying to shrink/size a q-select so that its height fits within a q-bar. Are there options or CSS that can do that?

My HTML is simply:

        <q-layout id="app" view="hHh lpR fFf">
            <q-header>
                <q-bar>
                    <q-btn dense flat icon="fa fa-arrow-up"></q-btn>
                    <q-select rounded outlined dense multiple use-chips hide-dropdown-icon options-dense
                              max-values="3" bg-color="red"
                              class="col-grow" :options="tags" v-model="selectedTags">
                        <template v-slot:prepend>
                            <q-icon name="fa fa-search"></q-icon>
                        </template>
                    </q-select>
                </q-bar>
            </q-header>
        </q-layout>

Thanks for any ideas!

s.molinari

You mean something like this?

https://codepen.io/smolinari/pen/NVryQj

Scott

Jezzta667

@Roger I think the ‘dense’ attribute may do the trick

s.molinari

You’ve got that already in your code.

Scott

Jezzta667

@s-molinari oh derr. I really shouldn’t answer questions on my phone (or perhaps at all)

Roger

@s-molinari Thanks, but that example uses a q-toolbar instead of a q-bar. I’m trying to get q-select to fit in the smaller vertical height of a q-bar.

Here’s an example showing the difference: https://codepen.io/RogerGA/pen/gJMKQp

s.molinari

Ahh…see, I would never have even thought to put a QSelect in a QBar and why I didn’t read it properly. And, to be honest, QBar isn’t made for adding a QSelect or any other form inputs.

What is it you are trying to add or get accomplished?

Scott

Roger

@s-molinari Ultimately, I’m just trying to make an aesthetic change… The app that I’m working on is strictly for desktop browsers and this q-select will appear at the top of a dialog box. The q-toolbar (and standard-sized q-select) would functionally work but they take up so much vertical space that they look silly in this particular use case.

Long story longer, I’m just trying to use smaller controls so they look better in this situation and waste less space.

metalsadman

@Roger you will have to override css https://codepen.io/metalsadman/pen/oRLoYg which is still kinda ugly, my suggestion would be just to put a dense “search” button that would invoke a popup proxy with a select search kinda function inside like this https://codepen.io/metalsadman/pen/xNOmVO.

Roger

@metalsadman Thanks! I’ll explore those.

No More Posting New Topics!

Shrink q-select to fit in q-bar