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-badge color="green">{{nrAppsOK}} OK</q-badge>
      <q-badge :color="nrAppsKO===0?'green':'red'">{{nrAppsKO}} KO</q-badge>
        :color="monitoringIsLate ? 'red' : 'green'"
      >last run: {{lastRun.fromNow()}}
      <q-badge outline>commit: {{commit}}</q-badge>

    This is rendered on my phone as:


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


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


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


    Is it normal that the badges do not wrap?

Log in to reply