Vuetify: [Feature Request] v-select auto width depending of content

[Extarys]

Problem to solve

It would allow for a better flow of content depending of the usage and better UI overall.

Proposed solution

<v-select
    :items="$i18n.locales"
    :item-value="code"
    :to="switchLocalePath(locale)"
    v-model="locale"
    class="pa-0 ma-0"
    item-text="name"
    hide-details
    single-line
    dense
    autowidth
  />

Check google sign in page at the bottom.

[KaelWD]

It already does, but for some reason there's a hidden input with 218px width:

https://codepen.io/anon/pen/WPwqYJ?editors=1010

[Extarys]

Oh good catch @KaelWD I didn't notice the empty input there.

[heidricklevi]

I can take a look at this one

[1hakr]

Guys, any update on this or a workaround till this is fixed?

[admxxi]

Hi everybody, can we expect that feature request be done soon?

[jacekkarczmarczyk]

For now you can fix it with simple css https://codepen.io/anon/pen/WBaarG (the problem is that there's no space for label or placeholder if there's not value selected)

[1hakr]

You can add a min-width to make it visible
https://codepen.io/anon/pen/WBaYYY

[douglasg14b]

Problem with specifying min-width is that it causes anything in the flex grid to push outside of it's bounds if an item is set to grow in that row.

Instead of causing the growing item to just grow by less.

[Teellcory]

Can it be changed to let the input do whatever it does by default when nothing is selected, but when something is selected (a span becoming a sibling of the input), set the input to a width of 0?

[arnaldoperez]

Besides de CSS trick .v-select__selections input { display: none} I also put the v-select insde a v-col and set its cols="auto". Works great!!

[KaelWD]

There's also 90% max-width from #4275

Workaround: https://codepen.io/kaelwd/pen/PowBxoK

[tamirvs]

.v-select__selections input { display: none } messes up the keyboard lookup.
I think .v-select__selections input { width: 0 } works.

[rveruna]

is there any news on this?

[lovkiymusic]

guyz, wazzup, vuetify is amazing, but... select width bug from 2019?) does anyone have nice solution? scoped styles is bad i think, thanx a lot

[Jaffsterz]

In case it's useful for anyone else, I got round this by putting ref="selectComponent" on the v-select, and adding an @change listener to it and doing this in the listener:

if (this.localSelectedItems.length > 0) { this.$refs.selectComponent.$el.querySelector('.v-select__selections input').style.width = 0; } else { this.$refs.selectComponent.$el.querySelector('.v-select__selections input').style.width = ''; }

where localSelectedItems is my selected items array.

It preserves the required input space when no selections have been made, and removes it otherwise.

[lovkiymusic]

I always have items in items array selections, redundantly create another listener for fix this little bug, i fix it with @arnaldoperez advice, thanx him for it.

Besides de CSS trick .v-select__selections input { display: none} I also put the v-select insde a v-col and set its cols="auto". Works great!!

[jost-s]

Hiding the input field in this manner breaks v-select in the current version 2.3.8.
What works very well is

.v-text-field .v-select__slot .v-select__selection--comma
  min-width: min-content

and then also style="min-width: min-content;" for the v-select

[alenamm]

I hope this helps to someone, because in my case input would slide under the selected item (.vs__selected) and I fixed it by changing flex configurations of the parent div to flex-wrap: nowrap:
.vs__selected-options {
flex-wrap: nowrap;
}