QTabs positioning error on QToolbar

[digiproduct]

I’m having a bit of an issue trying to centralise my QTabs on a QToolbar

Using the QSpace to do it seems to force the left right arrows to appear too soon.

In the Codepen below …

1. The first example shows the issue.

2. The second example is the same as the first example but with the QSpace removed … and the arrows no longer appear …

3. The third example is the same as the first example but with one less tab … just to show that QSpace does actually do what I wanted

https://codepen.io/david-watson-the-encoder/pen/arWxzY

Am I doing something wrong?

[metalsadman]

@digiproduct wrap your q-tabs inside a div. https://codepen.io/metalsadman/pen/ZNyYby. p.s. you can’t use self closing tags in UMD so you have to pair your elements with a closing tag <q-tab>...</q-tab>.

[digiproduct]

@metalsadman Perfect … worked instantly …

But … I don’t understand why …

I never would have thought of doing that … so could you explain why it needed that?

I’m not using in UMD … I just copied the code across from my Quasar CLI app

[metalsadman]

@digiproduct said in QTabs positioning error on QToolbar:

@metalsadman Perfect … worked instantly …

But … I don’t understand why …

I never would have thought of doing that … so could you explain why it needed that?

I’m not using in UMD … I just copied the code across from my Quasar CLI app

i think i’m wrong, don’t wrap it inside a div otherwise the arrow won’t show when the width is small. what you need is the shrink props both on your q-toolbar-title and q-tabs. updated the pen https://codepen.io/metalsadman/pen/ZNyYby. i think it’s how the toolbar occupies the remaining space of the row squeezing your q-tabs inside hence the left/right arrow showing. explained in the docs https://v1.quasar-framework.org/vue-components/toolbar#QToolbarTitle-API. same behavior on q-tabs explained here https://v1.quasar-framework.org/vue-components/tabs#QTabs-API. it’s some css quirks solved by the shrink props the team provided.

[digiproduct]

@metalsadman That will certainly keep the users watching …

The QTabs keeping moving left and right … very fast … it must be continuously recalculating …