Center q-toolbar-title on beta v0.14.0



  • On the beta v0.14.0 version of the framework is there is similar function to using :padding=“1” to center the q-toolbar-title if there is only 1 button on 1 side of the menu?

    Currently the title is displayed off center.

    The code I am using is:

    <q-toolbar slot="header">
         <q-btn flat @click="goBack()">
             <q-icon name="arrow_back" />
         </q-btn>
         <q-toolbar-title>
             {{ this.$route.name }}
         </q-toolbar-title>
     </q-toolbar>
    


  • Have you tried

    <q-toolbar slot="header">
         <q-btn flat @click="goBack()">
             <q-icon name="arrow_back" />
         </q-btn>
         <q-toolbar-title class="text-center">
             {{ this.$route.name }}
         </q-toolbar-title>
     </q-toolbar>
    


  • @benoitranque yes, tried that, unfortunately it just centers the text to that element and doesn’t take in to consideration the space take from the button on the left, so the text is off center, see below.

    0_1501777862280_upload-ec9387fd-f700-4f81-bbfe-51f2bd3342ef

    On the previous version you could use :padding=“1” to resolve this on IOS, but I cannot find anything similar int he beta documentation currently.



  • @rstoenescu is this possible to do anyway in v0.14 beta


  • Admin

    Put an invisible button after QToolbarTitle.



  • Perfect thanks!


Log in to reply
 

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