search

vuetifyjs / vuetify

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

[Bug Report][2.6.9] v-chip is going outside of given card area, close button is not visible as well #15631

Closed gileneusz closed 1 year ago

gileneusz commented 2 years ago

Environment

Vuetify Version: 2.6.9 Vue Version: 2.7.8 Browsers: Chrome 103.0.5060.134 OS: Mac OS 10.15.7

Steps to reproduce

as shown in the codepen

Expected Behavior

v-chip will maintain given space v-chip close button will be always visible

Actual Behavior

v-chip is going outside of given card area, close button is not always visible

Reproduction Link

https://codepen.io/gileneusz/pen/GRxXajj?editors=101

Other comments

critical issue for low-spaces chips, when you need close button be always visible, for example inside calendar days' view

KaelWD commented 2 years ago

v-chip is going outside of given card area

Because you gave it a margin, chips have max-width: 100%; which doesn't include margins.

close button is not always visible

valid.

yuwu9145 commented 2 years ago

This issue also happens to vuetify2: https://codepen.io/yuchaosydney/pen/yLjOrXj?editors=101

Before making any fix, just want to confirm should long text shown as text-overflow: ellipsis so it won't push close button outside container?

gileneusz commented 2 years ago

@KaelWD any updates on this minor bug?