Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Customized q-scroll-area's scroll thumb stays on the right side in RTL mode #17943

Open
air-dex opened this issue Mar 31, 2025 · 0 comments
Open
Labels
area/components bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/quasar-cli-vite kind/bug 🐞 Qv2 🔝 Quasar v2 issues

Comments

@air-dex
Copy link

air-dex commented Mar 31, 2025

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?

  1. Launch the example mentioned in the reproduction URL.
  2. Click on the menu button of one of the drawers without scrolling with the mouse wheel before (cf. "additional context").
  3. 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.104

Relevant 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
@air-dex air-dex added kind/bug 🐞 Qv2 🔝 Quasar v2 issues labels Mar 31, 2025
@github-actions github-actions bot added area/components bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/quasar-cli-vite labels Mar 31, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/components bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/quasar-cli-vite kind/bug 🐞 Qv2 🔝 Quasar v2 issues
Projects
None yet
Development

No branches or pull requests

1 participant