Vuetify: [Bug Report] avatar too big when inside small chips

Created on 8 Feb 2018  路  2Comments  路  Source: vuetifyjs/vuetify

Versions and Environment

Vuetify: 0.17.7
Vue: 2.5.13
Browsers: Chrome 63.0.3239.132
OS: Mac OS 10.12.6

Steps to reproduce

  1. include markup for a small chip
  2. include v-avatar into chip
  3. see result

Expected Behavior

Avatar should still be inside of chip and not be bigger

Actual Behavior

Avatar stays at "normal chip size"

Reproduction Link

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

Other comments

in the CSS I see that .chip .avatar has its width and height set to important.
Removing the !important solves this, because there are already styles for small avatars in chips

bug

Most helpful comment

Still persists on 1.3.5.
Are there any plans to resolve this bug?

All 2 comments

Just wanted to add that even setting the size prop on the avatar is overridden by the !important style declaration. So, best way I can see to handle at the moment is probably to add your own global class declaration:

.v-chip.v-chip--small .v-avatar {
  height: $chip-small-height !important;
  width: $chip-small-height !important;
}

Still persists on 1.3.5.
Are there any plans to resolve this bug?

Was this page helpful?
0 / 5 - 0 ratings