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

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

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

  • 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