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.

[Bug Report] VAvatar inside small VChip is not sized properly

See original GitHub issue

Environment

Vuetify Version: 2.0.2 Vue Version: 2.6.10 Browsers: Chrome 75.0.3770.142 OS: Windows 10

Steps to reproduce

Create a VChip component with the small prop and a child VAvatar

Expected Behavior

VAvatar has spacing between itself and the edge of the VChip just like it does when the small prop isn’t set

Actual Behavior

VAvatar goes to the edge of the VChip

Reproduction Link

https://codepen.io/Dylan-Chapman/pen/QedyQg

Other comments

This also can’t be fixed by setting the VAvatar’s size prop because of !important style declarations.

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:7 (4 by maintainers)

Top GitHub Comments

2reactions

sh7dmcommented, Aug 2, 2019

The problem is present with any non-default sizes: Codepen: https://codepen.io/sh7dm/pen/KOXdBe Playground:

<template>
  <v-container>
    <v-layout justify-space-around wrap align-space-around>
      <v-flex>
        <v-chip x-small>
          <v-avatar color="blue">A</v-avatar>
          Text
        </v-chip>
        <v-chip x-small pill>
          <v-avatar color="blue">A</v-avatar>
          Text
        </v-chip>
      </v-flex>

      <v-flex>
        <v-chip small>
          <v-avatar color="blue">A</v-avatar>
          Text
        </v-chip>
        <v-chip small pill>
          <v-avatar color="blue">A</v-avatar>
          Text
        </v-chip>
      </v-flex>

      <v-flex>
        <v-chip>
          <v-avatar color="blue">A</v-avatar>
          Text
        </v-chip>
        <v-chip pill>
          <v-avatar color="blue">A</v-avatar>
          Text
        </v-chip>
      </v-flex>

      <v-flex>
        <v-chip large>
          <v-avatar color="blue">A</v-avatar>
          Text
        </v-chip>
        <v-chip large pill>
          <v-avatar color="blue">A</v-avatar>
          Text
        </v-chip>
      </v-flex>

      <v-flex>
        <v-chip x-large>
          <v-avatar color="blue">A</v-avatar>
          Text
        </v-chip>
        <v-chip x-large pill>
          <v-avatar color="blue">A</v-avatar>
          Text
        </v-chip>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
export default {
  data: () => ({
  })
}
</script>

0reactions

johnleidercommented, Jul 1, 2021

resolved by #13192

If you have any questions, please reach out to us in our Discord community.