Vuetify - v-badge with huge number

Question

I have some issue using v-badge and v-tab with huge number in v-badge.

I found a workaround in css to width: auto; nicely v-badge size (to use huge numbers), but now it is overlapping my v-tab content because it's expanding in the wrong direction.

How can I avoid my v-badge content overlapping my v-tab content ?

CodePen

HTML

<div id="app">
  <v-app id="inspire">
    <v-tabs fixed-tabs>
      <v-tab
        v-for="n in 3"
        :key="n"
      >
        <v-badge color="secondary">
          <span>Test</span>
          <span slot="badge"> 15000 </span>
        </v-badge>
      </v-tab>
    </v-tabs>
  </v-app>
</div>

CSS

.v-badge__badge{
  width:auto;
  border-radius: 12px;
  padding: 5px 10px;
  margin-left: 20px
}

JS

new Vue({
  el: '#app'  
})

Answer 1

Do you have any specific reason to use the v-badge for this? I think v-badge is not meant to be used in the way you are using it. It has a fixed width and a height. Have you considered using a v-chip? As I see, that's the one which fits to your requirement well.

However, if you insist on using a v-badge, you can do a little hack and get them to align properly by adding an icon in between your number and text.

<v-badge left color="secondary">
    <span slot="badge"> 15000 </span>
    <span slot="default">Test</span>
    <v-icon large color="grey lighten-1" >&nbsp;</v-icon>
</v-badge>

CodePen - v-badge

You can also use v-chip to do this. I think this is the better way.

<v-chip color="grey"> 1500000 </v-chip>
<div>test</div>

CodePen v-badge

Hope it helps! Feel free to ask any doubts.