No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. r-j
    R
    • Profile
    • Following 0
    • Followers 0
    • Topics 1
    • Posts 2
    • Best 0
    • Groups 0

    r-j

    @r-j

    0
    Reputation
    1
    Profile views
    2
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    r-j Follow

    Latest posts made by r-j

    • RE: Need help with btn-group in toolbar and badges in dropdowns

      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

      posted in Help
      R
      r-j
    • Need help with btn-group in toolbar and badges in dropdowns

      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

      posted in Help
      R
      r-j