Open Doltario opened 4 days 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
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/#...