How to align buttons to left and right inside toolbar ?

[arieltoledo]

Hi, everybody. Im trying to align one button next to q-toolbar-tittle and the others to the right, but it’s seems imposible to do that. Can you help me please.

  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-toolbar-title shrink class="q-mr-md">
          <img alt="logo" src="~assets/logo.png" width="190">
        </q-toolbar-title>
        <div class="row justify-start">
          <q-btn no-caps flat color="grey-8" label="About" ></q-btn>
        </div>
        <div class="row justify-end">
          <q-btn class="items-end" no-caps flat color="grey-8" label="Login" ></q-btn>
          <q-btn no-caps flat color="grey-8" label="Register" ></q-btn>
        </div>
      </q-toolbar>
    </q-header>
    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

[s.molinari]

@arieltoledo - Try using QSpace. https://quasar.dev/vue-components/space#Introduction

Scott

[digiproduct]

@arieltoledo There was an issue with using QSpace on QToolbar that has been resolved in RC5.

That was what caused me to post the following thread …

https://forum.quasar-framework.org/topic/3625/qtabs-positioning-error-on-qtoolbar

But, you might find the codepen in that forum thread useful regarding QSpace

[arieltoledo]

@s-molinari @digiproduct, Thanks for the replies. I solve my issue with Qspace with the help of the the guys in the discord chat. I thought that implementing this kind of feature was a easy task, just using one the many alignment class available in the framework, still don’t know if I was doing something wrong or the toolbar containter has some black magic that I dont know about it.

[DarkLite1]

It’s very easy to align an element with <q-space> in a row.

To align a button to the right you can add the row class to the containing element and simply add <q-space />:

<q-form>
....
  <div class="row">
    <q-space />
    <q-btn label="Submit" type="submit" color="primary" />
  </div>
</q-form>

Depending on where you place <q-space />, it pushes the button to the right, left or (if you use one above and one below the button) to the middle of the row.

Thanks Scott for the helpful link to the docs: