QTabs positioning error on QToolbar
-
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 …
-
The first example shows the issue.
-
The second example is the same as the first example but with the QSpace removed … and the arrows no longer appear …
-
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?
-
-
@digiproduct wrap your
q-tabs
inside adiv
. 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>
. -
@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
-
@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 yourq-toolbar-title
andq-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 yourq-tabs
inside hence the left/right arrow showing. explained in the docs https://v1.quasar-framework.org/vue-components/toolbar#QToolbarTitle-API. same behavior onq-tabs
explained here https://v1.quasar-framework.org/vue-components/tabs#QTabs-API. it’s some css quirks solved by theshrink
props the team provided. -
@metalsadman
That will certainly keep the users watching …
The QTabs keeping moving left and right … very fast … it must be continuously recalculating …