Is it possible to make the select input scrollable?

[embluk]

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.

[metalsadman]

@embluk thats what the input-class and input-style props are for.

[embluk]

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

[embluk]

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.