Vuetify: [Bug Report] v-chip doesn't support long text
Environment
Vuetify Version: 2.0.2
Vue Version: 2.6.10
Browsers: Chrome 69.0.3497.100
OS: Windows 10
Steps to reproduce
Look at chip on page load
Expected Behavior
The height of the chip should auto adjust to fit the content, and the close icon (if set to show) should be right aligned and centered vertically. Or it should get cut off and eclipsed with a hover over title.
Actual Behavior
Chip height is the same and text overflows.
Reproduction Link
https://codepen.io/anon/pen/oKBrmd?&editable=true&editors=111
TheInvoker
All 2 comments
I'll need to evaluate if there is any specific information from spec and if not how we should proceed. This would be the case for a lot of components such as v-btn.
Workaround: https://codepen.io/johnjleider/pen/NQjWEm?&editable=true&editors=111
johnleider
on 30 Jul 2019
Multi line chips may not look good. If that is the case, can it at least get a max-length prop, where I can set like say 150 chars, and if it goes over, it gets truncated with elipses? Or have it support multilines.
If going with elipses route, maybe have a title prop with the whole text, so they can see it on hover over.
TheInvoker
on 30 Jul 2019
Related issues
alterhu2020
路
3Comments
jofftiquez
路
3Comments
dschreij
路
3Comments
dohomi
路
3Comments
aaronjpitts
路
3Comments
Most helpful comment
Multi line chips may not look good. If that is the case, can it at least get a max-length prop, where I can set like say 150 chars, and if it goes over, it gets truncated with elipses? Or have it support multilines.
If going with elipses route, maybe have a title prop with the whole text, so they can see it on hover over.