Need help with btn-group in toolbar and badges in dropdowns

[r-j]

I have two questions concerning the following code snippet:

      <q-toolbar>
        <q-btn-group spread>
          <q-btn stretch flat icon="mdi-email-open">
            <q-badge floating color="red">7</q-badge>
          </q-btn>
          <q-btn stretch flat icon="mdi-bell" />
          <q-btn-dropdown stretch flat dropdown-icon="null">
            <template v-slot:label>
              <q-icon name="mdi-account" />
              <q-badge floating color="red">2</q-badge>
            </template>
            <q-list>
              <q-item-label header>Dummy</q-item-label>
              <q-item v-for="n in 3" :key="`x.${n}`" clickable v-close-popup tabindex="0">
                <q-item-section avatar>
                  <q-avatar icon="mdi-sunglasses" color="secondary" text-color="white" />
                </q-item-section>
                <q-item-section>
                  <q-item-label>Foo Bar</q-item-label>
                </q-item-section>
                <q-item-section side>
                  <q-icon name="info" />
                </q-item-section>
              </q-item>
            </q-list>
          </q-btn-dropdown>
        </q-btn-group>
      </q-toolbar>

1. I would like to show a toolbar with three buttons which should consume the complete toolbar. Therefore I have chosen a buttongroup, but although I used stretch for the buttons and spread for the buttongroup, they consume only the needed space and nothing more

2. I would like to show a badge on a dropdown button and don’t want to show that dropdown arrow. Do I have to write some custom css like .q-btn-dropdown__arrow {display:none} or is there some helper/a more elegant way I can use for that?

I’d be thankful for any hints, especially if you can also tell me where I can look for answers to such problems by myself

[s.molinari]

Best thing to do is create a code pen, so we can give you suggestions directly in the code. For the dropdown arrow, just add “none” to the dropdown-icon prop. The only issue there is, the space for the button will still be there. You might just want to build your own menu button with QMenu or QPopupProxy, for your use case.

Scott

[r-j]

Sure you’re right. Here is my jsfiddle: https://jsfiddle.net/0cquhr4k/

I have made some progress. If I use “q-btn-group flat”, it looks okay as long as you do not hover over the toolbar.

Since the click target isn’t what you would expect, I think it is bad UX and the buttons really should take up all the space. If I use “q-toolbar class=“q-pa-none”” the padding left and right disappears, but the y padding seems to be caused by an inner element that I cannot identify.

I am clueless why my css for hiding the downarrow is not working.

The last problem is that q-badge is positioned to its parent q-btn, but not the q-icon