"shrink" isn't applied when putting a q-tabs inside of a q-toolbar ... that is inside a q-header.

[ohmeow]

The shrink isn't applied when putting a q-tabs inside of a q-toolbar ... that is inside a q-header.

Is there a way to get that behavior back so that the tabs don't take up all the available space and just what is needed?

Code:

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

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

[ontwikkelfabriek]

I created a codepen.io with you header code and I don't see the problem:

https://codepen.io/ontwikkelfabriek/pen/NWdZqQY

btw I removed shrink and stretch classes.

[ohmeow]

Thanks.

I guess what I'm asking is how to make the individual tabs widths smaller. If you look at the examples in the docs, where they aren't in a q-header, they're more compact ... but once you put them in a q-header, they get bigger. What I'd like to be able to do is put them in a q-header but have them look more compact like in the examples :)

[ontwikkelfabriek]

@ohmeow

Minimal width:
https://codepen.io/ontwikkelfabriek/pen/NWdZqQY