quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time

Home Page:https://quasar.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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?

  1. Go to the reproduction link
  2. Observe the embedded QTabs on the 4th tab is aligned with justify instead of left 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.