@metalsadman Thanks! I’ll explore those.

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

@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

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!