No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    How to center icons in a (bottom) toolbar?

    Help
    1
    2
    1773
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • E
      eric-naguras last edited by

      0_1506157694411_android.png
      How do I center buttons with icons on a (bottom) toolbar?
      Screenshot above is from an android device with remote debugging.

      <q-toolbar slot="footer" class="mobile-only">
                  <q-btn flat icon="home" @click="$router.push('/properties')">
                      Properties
                  </q-btn>
                  <q-btn flat icon="people" @click="$router.push('/customers')">
                      Customers
                  </q-btn>
                  <q-btn flat icon="contact_phone" @click="$router.push('/agents')">
                      Agents
                  </q-btn>
       </q-toolbar>
      1 Reply Last reply Reply Quote 0
      • E
        eric-naguras last edited by

        This is doing what I want:

        <q-toolbar slot="footer" class="justify-around">
                    <div style="display:block">
                        <q-btn flat icon="home" class="col-3" @click="$router.push('/properties')">
                            Properties
                        </q-btn>
                    </div>
                    <div style="display:block">
                        <q-btn flat icon="people" class="col-3" @click="$router.push('/customers')">
                            Customers
                        </q-btn>
                    </div>
                    <div style="display:block">    
                        <q-btn flat icon="contact_phone" class="col-3" @click="$router.push('/agents')">
                            Agents
                        </q-btn>
                    </div>
                </q-toolbar>
        1 Reply Last reply Reply Quote 0
        • First post
          Last post