What happened?
When opening a cue drawer from from mini mode items inside shift slightly horizontally.
This also happens on the documentation page on the latest version:
https://quasar.dev/layout/drawer#mouseover-mouseout-trigger
The movement is small and thus hard to see. I have added CSS scaling in the Codepen to make it easier to see.
What did you expect to happen?
Items stay put when the drawer opens and closes.
Reproduction URL
https://codepen.io/FKPSC/pen/myREYPo
How to reproduce?
- Optionally turn on CSS scaling to more easily see the movement.
- Hover over the mini drawer and notice the movement of the items inside
- On comment the fix and notice the movement is gone.
Flavour
Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)
Areas
Components (quasar)
Platforms/Browsers
Chrome, Electron, Firefox, Safari, Microsoft Edge
Quasar info output
Operating System - Linux(6.17.0) - linux/x64
NodeJs - 24.13.1
Global packages
NPM - 11.8.0
yarn - 1.22.22
pnpm - Not installed
bun - Not installed
@quasar/cli - 3.0.0
@quasar/icongenie - Not installed
cordova - Not installed
Important local packages
quasar - 2.19.3 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
@quasar/app-vite - 2.6.0 -- Quasar Framework App CLI with Vite
@quasar/extras - 1.18.0 -- Quasar Framework fonts, icons and animations
eslint-plugin-quasar - Not installed
vue - 3.5.34 -- The progressive JavaScript framework for building modern web UI.
vue-router - 5.0.7
pinia - 3.0.4 -- Intuitive, type safe and flexible Store for Vue
vite - 8.0.12 -- Native-ESM powered web dev build tool
vite-plugin-checker - Not installed
eslint - 9.39.4 -- An AST-based pattern checker for JavaScript.
esbuild - 0.27.7 -- An extremely fast JavaScript and CSS bundler and minifier.
typescript - 5.9.3 -- TypeScript is a language for application scale JavaScript development
workbox-build - Not installed
register-service-worker - Not installed
electron - Not installed
@electron/packager - Not installed
electron-builder - Not installed
@capacitor/core - Not installed
@capacitor/cli - Not installed
@capacitor/android - Not installed
@capacitor/ios - Not installed
Quasar App Extensions
*None installed*
Relevant log output
Additional context
I initially found out that commenting out these CSS properties in Chrome Dev tools stops the movement:
.q-drawer-container:not(.q-drawer--mini-animate) .q-drawer--mini .q-item, .q-drawer-container:not(.q-drawer--mini-animate) .q-drawer--mini .q-item__section {
text-align: center;
justify-content: center;
min-width: 0;
padding-left: 0;
padding-right: 0;
}Then when I was setting up the demo in the code pen, I noticed commenting out the padding above reverted it to 16 pixels on each side from some other rule. I tried changing some other properties, tried to set the padding left and then the padding right to different values and I ended up figuring out this particular value works:
What happened?
When opening a cue drawer from from mini mode items inside shift slightly horizontally.
This also happens on the documentation page on the latest version:
https://quasar.dev/layout/drawer#mouseover-mouseout-trigger
The movement is small and thus hard to see. I have added CSS scaling in the Codepen to make it easier to see.
What did you expect to happen?
Items stay put when the drawer opens and closes.
Reproduction URL
https://codepen.io/FKPSC/pen/myREYPo
How to reproduce?
Flavour
Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)
Areas
Components (quasar)
Platforms/Browsers
Chrome, Electron, Firefox, Safari, Microsoft Edge
Quasar info output
Relevant log output
Additional context
I initially found out that commenting out these CSS properties in Chrome Dev tools stops the movement:
Then when I was setting up the demo in the code pen, I noticed commenting out the padding above reverted it to 16 pixels on each side from some other rule. I tried changing some other properties, tried to set the padding left and then the padding right to different values and I ended up figuring out this particular value works: