0.14 QTab sizing

  • What’s the proper/best way to make QTabs more compact? They take up quite a bit of screen real-estate when combined with the toolbar.

    Unless I missed it, it would be nice if this was a component parameter.

  • The best solution is the have the toolbar and tabs hide when scrolling, which is a standard feature of the layout. Something else you can do is adjust the tab min height in the stylus variables. http://beta.quasar-framework.org/components/stylus-variables.html

    Learn more about theming here: http://beta.quasar-framework.org/guide/quasar-theming.html

    Learn more about the layout features: http://beta.quasar-framework.org/components/layout.html (especially the “reveal” prop)


  • You can just set the width of the parent element and the tabs will change accordingly.

  • I’d say his issue is with the height, not the width.


  • Oh, if it is about the height, then forget what I said. 😃

  • It is the height I’d like to trim some fat off of, yes. 🙂

    Thanks for the feedback Scott. I am using the reveal prop and it works great. I’ll try to mess around with the stylus pieces you recommended as it still feels too chunky , especially in desktop view. It would be nice if it behaved similar to QBtn, having a “small” prop available to optionally trim it down as well.

  • One other thing I think I asked Razvan for was a way to put icons next to the text in the tabs, instead of on top, as the icons over the text makes the tab bar a lot more “chunky” as you put it. Since the tabs have scrolling, the width isn’t such an issue and I think it looks better on the desktop. The icons on top of the text is Material design spec conform and I can’t remember what Razvan replied. Oh well. See what you can do. I’m sure you’ll get tabs where you need them.


  • Yes sir. I ended up sizing the tab icons to same font-size as a small qbtn and removed the labels. I’m using tooltips to replace the labels. It should be fine what I’m trying to do for now. Thanks for responding.

  • I agree with @kayex that the tabs look fairly bulky (especially the height), even more so if the app’s toolbar also is that big. The end result is that it all looks just a bit too clunky and not really elegant.

    To deal with this, I ended up making the font size and icon font size smaller, as well as the padding and min height. All of this through variables in app.variables.styl:

    $tabs-font-size ?= .8rem
    $tabs-icon-font-size ?= 23px
    $tabs-padding-with-icon ?= 8px 10px
    $tabs-min-height-with-icon ?= 48px

    Same exercise for the app’s toolbar, in that case making the toolbar less “high” was simply a matter of specifying “small” on the buttons:

    <q-toolbar glossy slot=“header”>

    <q-btn flat small round …

    This results in a UI that looks just a little more subtle and less clunky.

Log in to reply