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