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. :D

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

Log in to reply

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