-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
Open
Labels
Qv2 🔝Quasar v2 issuesQuasar v2 issuesarea/componentsbug/1-repro-availableA reproduction is available and needs to be confirmed.A reproduction is available and needs to be confirmed.flavour/quasar-cli-vitekind/bug 🐞
Description
What happened?
When I am in RTL mode, the scroll thumb is not on the same side than its corresponding bar. The bar is located on the left side as expected, but the scroll thumb remains on the right side.
What did you expect to happen?
When I am in RTL mode, the scroll thumb should be on the same side than the scroll bar.
Reproduction URL
https://stackblitz.com/edit/quasar-bug-vertical-scrollbar-rtl
How to reproduce?
- Launch the example mentioned in the reproduction URL.
- Click on the menu button of one of the drawers without scrolling with the mouse wheel before (cf. "additional context").
- Look for at the customized scroll bar and its thumb.
Flavour
Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)
Areas
Components (quasar)
Platforms/Browsers
Chrome, Firefox, Microsoft Edge
Quasar info output
Operating System - Linux(5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36) - linux/x64
NodeJs - 18.20.3
Global packages
NPM - 10.2.3
yarn - 1.22.19
pnpm - 8.15.6
bun - Not installed
@quasar/cli - undefined
@quasar/icongenie - Not installed
cordova - Not installed
Important local packages
quasar - 2.18.1 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
@quasar/app-vite - 2.2.0 -- Quasar Framework App CLI with Vite
@quasar/extras - 1.16.17 -- Quasar Framework fonts, icons and animations
eslint-plugin-quasar - Not installed
vue - 3.5.13 -- The progressive JavaScript framework for building modern web UI.
vue-router - 4.5.0
pinia - Not installed
vite - 6.2.4 -- Native-ESM powered web dev build tool
vite-plugin-checker - Not installed
eslint - 9.23.0 -- An AST-based pattern checker for JavaScript.
esbuild - 0.25.2 -- The cross-platform WebAssembly binary for esbuild, a JavaScript bundler.
typescript - 5.8.2 -- 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*
Networking
Host - quasarbugverticalscrollbarrtl-dc5j
en0 - 192.168.1.104Relevant log output
Additional context
I have tested it on several browsers:
- On Chromium-based browsers I used (Vivaldi, Chrome, Edge), the thumb remains on the opposite side.
- On Firefox, the thumb joins its bar after I scrolled with the mouse wheel
Metadata
Metadata
Assignees
Labels
Qv2 🔝Quasar v2 issuesQuasar v2 issuesarea/componentsbug/1-repro-availableA reproduction is available and needs to be confirmed.A reproduction is available and needs to be confirmed.flavour/quasar-cli-vitekind/bug 🐞