Vuetify: [Bug Report] v-select selection overflow

Created on 27 Sep 2018 · 3Comments · Source: vuetifyjs/vuetify

Versions and Environment

Vuetify: 1.2.5
Vue: 2.5.17
Browsers: Chrome 69.0.3497.100
OS: Linux x86_64

Steps to reproduce

Select last element in dropdown list

Expected Behavior

if selection doesnt fit — it should be ellipsed

Actual Behavior

If selection contains multiple words: v-select height will be increased to fit all. Not optimal in my opinion.
If selection contains one long word: div.v-select__selections overflows component and pushes appended icons.

Reproduction Link

https://codepen.io/souren-araya/pen/GYKWgJ

Source

sourenaraya

Most helpful comment

Something like this? You think so for both the long word and multi word inputs??

https://codepen.io/mccki047/pen/oavRPW

mcclymont-k on 27 Sep 2018

👍3

All 3 comments

Something like this? You think so for both the long word and multi word inputs??

https://codepen.io/mccki047/pen/oavRPW

mcclymont-k on 27 Sep 2018

👍3

This is not a bug and the intended behavior. The above workaround is a great example of how to solve this in userland.

johnleider on 6 Oct 2018

@johnleider While I am truly grateful for the work you all do... humbly going to suggest this creates buggy behavior if it isn't a bug. The workaround only works in very specific instances. If you use the chips with a delete icon, for example, it doesn't work (codepen provided). It seems that can't be fixed with css either because the delete icon is nested inside the v-chip's text span. Not being able to control the size makes for forms that extend beyond their bounds.

https://codepen.io/anon/pen/arjrwr