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

    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>

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


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.