Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Distorted text avatars in a <v-list>

See original GitHub issue

Steps to reproduce

Trying to have <v-avatar> or <v-list-tile-avatar> as text avatars in a <v-list> leads into distorted avatars.

Versions

Vue@2.4.4, Vuetify@0.15.7, Windows 7, Chrome 55.0.2883.75 m

What is expected ?

Support for nicely rendered text avatars in a <v-list>

What is actually happening ?

Having distorted rendered text avatars in a <v-list>

Reproduction Link

https://codepen.io/anon/pen/oGbyoG?editors=1010

I put text and img avatar in this list together to contrast the issue with a working <img> example. So please be aware of that I do not want to have both in a <v-list>. This is only for demonstration purpose…

Issue Analytics

State:
Created 6 years ago
Reactions:5
Comments:12 (9 by maintainers)

Top GitHub Comments

1reaction

johnleidercommented, Nov 18, 2017

The markup will change very slightly. You cannot use v-avatar, you must use v-list-tile-avatar. Added colorable to v-avatar and v-list-tile-avatar, use this instead of class.

This codepen will work after released: https://codepen.io/johnjleider/pen/oopgoL?editors=1010

And this is what it looks like:

0reactions

lock[bot]commented, Apr 15, 2019

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord