To improve the look and style I changed the CSS a little:

.inputStyle .q-field__inner .q-field__control
{
    padding-right: 0;
    min-height: unset;
}

.inputStyle .q-field__inner .q-field__control .q-field__control-container
{
    margin-top: 16px;
    margin-bottom: 16px;
    min-height: unset;
}

.inputStyle .q-field__inner .q-field__control .q-field__control-container .q-field__native
{
    padding: 0;
    padding-right: 12px;
    min-height: unset;
    max-height: 130px;
    overflow-y: auto;
    overflow-x: hidden;
}

Centres the scroll bar and adds space above and below the chips and only shows scroll bar when you go past the max height. Starts off with the same height as normal at 56px.

@metalsadman Thanks for the suggestion but it doesn’t work for me? I’ve kind of got it working with the following CSS:

.inputStyle .q-field__inner .q-field__control
{
    padding-right: 0;
}

.inputStyle .q-field__inner .q-field__control .q-field__control-container
{
    max-height: 180px;
    overflow-y: scroll;
    overflow-x: auto;
}

But it would be a great addition to the select inputs I think, natively.

At the moment the select input when you add new values to it will keep expanding, for example:

And when I put some styling on the input to include a scroll:

Am I missing something or is there a way to do this with the framework and select inputs? Making it so the select input has a max-height and a scroll bar because otherwise it will keep expanding? I don’t mind the select input expanding but I have a use case where I need to control the max height.

Seems like it was because I had the font awesome link from them but not the specific quasar font awesome JS file:

<script src="https://cdn.jsdelivr.net/npm/quasar@1.14.7/dist/icon-set/fontawesome-v5.umd.min.js"</script>

I am following the example of: https://quasar.dev/vue-components/select#Example--Single-vs-multiple-selection

But when the page loads I get the error Cannot read property 'dropdown' of undefined, my code is exactly the same, so I am unsure why I get this error? Any ideas where I am going wrong?

@metalsadman Oh yeah I see the example now, I totally missed it!

Thank you!

I’m new to VueJS and this Quasar framework.

I am using the Stepper and I have a button outside the stepper component and I want to use it to go to the next stepper panel but how do I call the next method inside a new Vue(...) call?

I am referring to https://quasar.dev/vue-components/stepper#QStepper-API

Is it possible to turn off global CSS styles that the Quasar CSS file uses and only use styles for when a component is used? For example, I don’t want Quasar to change any h1 or p tags globally, only inside a Quasar component when I use one?

I am using the Quasar UMD/ CDN install but cannot find an option or configuration for what I am trying to do? Ideally I don’t want to have to change everything manually by overriding styles.

Thanks, Luke