vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.82k stars 6.96k forks source link

[Bug Report][3.7.2] V-autocomplete vertical direction #20604

Open Doltario opened 4 days ago

Doltario commented 4 days ago

Environment

Vuetify Version: 3.7.2 Vue Version: 3.4.26 Browsers: Firefox 131.0 OS: Mac OS 10.15

Steps to reproduce

Open the link, notice that v-autocomplete width seems really small. It occurs when the direction="vertical" prop is added.

Expected Behavior

Width to be usable.

Actual Behavior

The width is unsetable and really small, so that user can't even see the selected values.

Reproduction Link

https://play.vuetifyjs.com/#...

yogender-kulshrestha commented 1 day ago

If your goal is to display the selected chips in the v-autocomplete vertically, instead of using direction="vertical", you can apply a custom CSS rule to achieve the same layout.

You can add the following custom CSS to handle the vertical stacking of chips:

.custom-width .v-field__input {
  display: grid;
}

This will ensure that the selected chips are displayed in a vertical stack, without causing the width issue that occurs when using the direction="vertical" prop. This approach allows you to maintain control over the width and layout while achieving the desired vertical chip display.

Solution Link

https://play.vuetifyjs.com/#...