Labels of different sizes

[xereda]

Labels of different sizes

I’m using labels to illustrate quantity within items in a list. The problem is they are getting disproportionate.

How do I implement this in a more elegant way?

Thank you.

Note: Below is an illustration and part of the code.

<template>
  <div>
    <div slot="header" class="toolbar primary">
      <quasar-search v-model="search" class="primary"></quasar-search>
    </div>
    <div class="layout-padding">
      <div class="list item-delimiter" >
        <div class="item" v-for="esp in listaComFiltro">
            <div class="item-content">
              {{ esp.nome }}
            </div>
            <div class="item-secondary stamp">
              <span class="label circular bg-primary text-white">{{ esp.total }}</span>
            </div>
        </div>
      </div>
    </div>

  </div>
</template>

[rstoenescu]

You need to set height and width for those labels through CSS to obtain a perfect round circle around it. Height and width must be identical.

[xereda]

Ok,
tks!

[rstoenescu]

Will try to enhance this so setting height and width will no longer be mandatory for perfect circle. Have an idea for the CSS already.

[xereda]

@rstoenescu Will you do any new implementation? It is?

[rstoenescu]

No plan to do this on v0.9. Maybe on later releases.