Nesting QTabs causes issues with `align` property
hawkeye64 opened this issue · comments
What happened?
The workflow needed to to have a parent QTabs/QTabPanels (topics) and out of one of those tabs, there will be another QTabs/QTabPanels (sub-topics). When this happens, I found the align="left"
on the nested QTabs is ignored and the tabs are treated as align="justify"
. There may be other issues, but I have not come across them yet.
What did you expect to happen?
The nested QTabs to adhere to the align
property
Reproduction URL
https://codepen.io/Hawkeye64/pen/abxpdyM?editors=1010
How to reproduce?
- Go to the reproduction link
- Observe the embedded QTabs on the 4th tab is aligned with
justify
instead ofleft
which is specified in the code
Flavour
Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)
Areas
Components (quasar)
Platforms/Browsers
Chrome
Quasar info output
$ quasar info
Operating System - Linux(6.5.0-10022-tuxedo) - linux/x64
NodeJs - 18.16.0
Global packages
NPM - 9.5.1
yarn - 1.22.19
@quasar/cli - 2.4.0
@quasar/icongenie - 3.1.1
cordova - Not installed
Important local packages
quasar - 2.15.1 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
@quasar/app-vite - 2.0.0-beta.1 -- Quasar Framework App CLI with Vite
@quasar/extras - 1.16.9 -- Quasar Framework fonts, icons and animations
eslint-plugin-quasar - Not installed
vue - 3.4.21 -- The progressive JavaScript framework for building modern web UI.
vue-router - 4.3.0
pinia - 2.1.7 -- Intuitive, type safe and flexible Store for Vue
vuex - Not installed
vite - 5.1.0 -- Native-ESM powered web dev build tool
esbuild - 0.20.0 -- An extremely fast JavaScript and CSS bundler and minifier.
eslint - 8.57.0 -- An AST-based pattern checker for JavaScript.
electron - Not installed
electron-packager - Not installed
electron-builder - Not installed
register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
@capacitor/core - Not installed
@capacitor/cli - Not installed
@capacitor/android - Not installed
@capacitor/ios - Not installed
Quasar App Extensions
*None installed*
Relevant log output
No response
Additional context
No response
The container of that inner QTabs has a width below that of the QTabs, so the alignment is deferred to justify-align per design.