Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Labels of different sizes

    Help
    2
    6
    1616
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • X
      xereda last edited by

      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>
      
      
      1 Reply Last reply Reply Quote 0
      • rstoenescu
        rstoenescu Admin last edited by

        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.

        1 Reply Last reply Reply Quote 0
        • X
          xereda last edited by

          Ok,
          tks!

          1 Reply Last reply Reply Quote 0
          • rstoenescu
            rstoenescu Admin last edited by

            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.

            X 1 Reply Last reply Reply Quote 0
            • X
              xereda @rstoenescu last edited by

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

              1 Reply Last reply Reply Quote 0
              • rstoenescu
                rstoenescu Admin last edited by

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

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post