Tabs Styling - Full Width / Justify on Desktop

  • 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:

    alt text

    To this:

    alt text


    <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>

  • Admin

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

  • Tks @rstoenescu ! It worked.

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

    Anyway, thank you so much!

  • Admin

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

  • It does not work for me

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

    PD: @rstoenescu did you made the specifil class?

Log in to reply