Alignment of q-toolbar

  • Hi guys
    If I want a qtoolbar looks like the quasar forum and the doc, with title on the left, icons /tabs next, and login and search icon to the right.
    What the best practice is?
    Should I use grid or position class

    Looks like qtoolbar title is align left and icons next are align right by default.

    I try to add tabs next to title they just align to the right.

    Thank you

  • Admin

    QToolbar uses flexbox CSS. So a <div class="col"></div> simply adds a “spacer”.

  • For the record this strategy works perfectly (using 0.17.10). I had a similar layout need due to having a large search input directly after the title:

    [Logo | Title | Search | Profile]

    Code looks like:

            <q-btn @click="$router.push('/')" flat round dense icon="local_pizza" />
            <q-toolbar-title shrink class="q-mr-md">
              <span slot="subtitle">and Wings!</span>
            <q-search v-model="terms" inverted color="none" class="search">
              <q-autocomplete @search="search" @selected="selected" />
            <div class="col"></div> <!-- eat up all the free space -->

Log in to reply