Labels of different sizes



  • 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.

    0_1479218131690_Captura de Tela 2016-11-14 às 17.29.50.jpg

    
    <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>
    
    

  • Admin

    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.



  • Ok,
    tks!


  • Admin

    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.



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


  • Admin

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