q-bar elements do not wrap



  • I have a simple application which starts with a q-bar element and contains a few q-badge. These q-badges do not wrap when overflowing, is that normal?

    The code I use:

    <q-bar>
      <div>Monitoring</div>
      <q-badge color="green">{{nrAppsOK}} OK</q-badge>
      <q-badge :color="nrAppsKO===0?'green':'red'">{{nrAppsKO}} KO</q-badge>
      <q-badge
        align="middle"
        :color="monitoringIsLate ? 'red' : 'green'"
      >last run: {{lastRun.fromNow()}}
      </q-badge>
      <q-badge outline>commit: {{commit}}</q-badge>
    </q-bar>
    

    This is rendered on my phone as:

    ca719381-5d37-46a8-a83f-acb56675eb73-image.png

    Please note that the rightmost badge is truncated. When I swipe the screen left, I see

    f93b776c-811c-44ec-9e10-67ef7aba6ac9-image.png

    There should be a badge next to the “last run” one, and indeed it is there, but “hidden”:

    e8cbbcca-667d-4583-8962-f9a1a8ba04fc-image.png

    Everything is fine on a wider screen (or in landscape mode on my phone):

    cb8375d2-4a6e-4c4d-ba53-c1412809bd07-image.png

    Is it normal that the badges do not wrap?


Log in to reply