Centering q-toolbar title / Using flex CSS on q-toolbar



  • Hello,

    I’m having a bit of trouble with the q-toolbar. I wish to use the toolbar in the following way:

    Have some buttons left, a centered title and some buttons right, like this:
    (I’m not sure if it comes out correctly, but pretend the title is centered, and the buttons are left and right flushed)

    ------------------------------------------------------------------------------------------------
    | Button1  Button2                         Title                                       Button3 |
    ------------------------------------------------------------------------------------------------
    

    Basically, how would I do that? I tried to use <div class=".col">..</div> within the toolbar 3 times, but it doesn’t work, things like justify-around won’t work either if I have a different amount of buttons on either side.



  • Your best bet is diving up the available space into three parts q-toolbar>div.row-4*3



  • Hi Sarndt,
    Did you solved your question?
    I want the same design. The doc of toolbar layout doesn’t talk much about layout.


  • Admin

    https://jsfiddle.net/5rvxmo62/
    QToolbar is using flexbox CSS, so if you understand Quasar Flex CSS or flexbox you’re good to go. And it’s easy!


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.