Tabs Styling - Full Width / Justify on Desktop

[uebbi]

When using tabs on Desktop / Middle / Larger screens they are stacked besides each other on left - this is a default behavior (Image 1).

I wanted that stay full width / justified (Image 2).

Some help?

From this:

To this:

Code:

<quasar-tabs class="bg-teal-4 text-white" slot="navigation">
  <quasar-tab icon="home"  route="/foo" exact replace>Foo</quasar-tab>
  <quasar-tab icon="alarm" route="/bar" exact replace>Bar</quasar-tab>
  <quasar-tab icon="help"  route="/zig" exact replace>Zig</quasar-tab>
</quasar-tabs>

[rstoenescu]

.quasar-tabs-scroller, .quasar-tab
    flex 1 1 auto

[uebbi]

Tks @rstoenescu ! It worked.

I think could exist a class ‘Fixed’ like in Vue Material for this.

Anyway, thank you so much!

[rstoenescu]

Will make a specific CSS class for this. Thanks for pointing this out.

[pepe pipo]

It does not work for me

<q-tabs>
        <q-tab slot="title" icon="input"/>
        <q-tab slot="title" icon="input"/>
</q-tabs>
...
<style scoped>
.-tabs-scroller, .q-tab {
    flex: 1 1 auto;
}
</style>

PD: @rstoenescu did you made the specifil class?