Quasar: Toolbar with tabs UI is glitching

[RohanTalip]

What did you get as the error?

The toolbar with tabs has a weird UI glitch that oscillates back and forth.

Please see https://youtu.be/Ips9YDmNGD4 which was recorded in Chrome 72 on a Mac running High Sierra with a tab open on https://v1.quasar-framework.org/vue-components/toolbar

N.B. This behaviour also happens for me in my own web app.

What were you expecting?

No weird UI glitches.

What steps did you take, to get the error?

I just opened https://v1.quasar-framework.org/vue-components/toolbar#Example--With-Tabs in Chrome or alternatively, tried to use tabs with a toolbar in my own web app.

[rstoenescu]

Fix will be available in beta.5

[RohanTalip]

Thanks, @pdanpdan and @rstoenescu !

[pdanpdan]

After release you'll have to add class col-shrink to QTabs tag.

[hawkeye64]

Is this something that should be added to the docs or upgrade guide?On Feb. 27, 2019 11:00 a.m., Popescu Dan [e-mail] wrote:After release you'll have to add class col-shrink to QTabs tag.

—You are receiving this because you are subscribed to this thread.Reply to this email directly, view it on GitHub, or mute the thread.

[pdanpdan]

I added it in the toolbar with tabs example. I don't know what to say about the upgrade guide as it wasn't working before.

[mstaack]

having this currently with macos & chrome(Version 72.0.3626.119) on https://v1.quasar-framework.org/vue-components/toolbar firefox is not showing this issue for me.

https://gfycat.com/dimcornydungenesscrab

[hawkeye64]

Actually, I was talking about the col-shrink - but I have added it to the Upgrade guide now.

[rstoenescu]

In future beta.9, please use the new shrink Boolean prop on QTabs when placing in a QToolbar. Added example in docs.

<template>
  <div class="q-pa-md">
    <q-toolbar class="bg-purple text-white shadow-2 rounded-borders">
      <q-btn flat label="Homepage" />
      <q-space />

      <!--
        notice shrink property since we are placing it
        as child of QToolbar
      -->
      <q-tabs v-model="tab" shrink>
        <q-tab name="tab1" label="Tab 1" />
        <q-tab name="tab2" label="Tab 2" />
        <q-tab name="tab3" label="Tab 3" />
      </q-tabs>
    </q-toolbar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tab: ''
    }
  }
}
</script>

[RohanTalip]

I still see this happening on https://v1.quasar-framework.org/vue-components/toolbar (which looks like it is using beta.10) using Chrome 72.0.3626.121 and it looks like the shrink property is being used there.

It seems to work fine in Safari 12.0.3 and Firefox 65.0.1.