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.


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.