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

QTabs overflow when align=right not working #17847

Open
ThomasKro opened this issue Feb 21, 2025 · 1 comment
Open

QTabs overflow when align=right not working #17847

ThomasKro opened this issue Feb 21, 2025 · 1 comment
Labels
area/components bug/2-confirmed We have reproduce the problem and confirmed that this is a bug. flavour/quasar-cli-vite kind/bug 🐞 Qv2 🔝 Quasar v2 issues

Comments

@ThomasKro
Copy link

What happened?

When qTabs has the align=right set the overflow arrows no longer appear.

What did you expect to happen?

If set to align=center or align=left the overflow arrows appear as expected. The same should be true for align=right

Reproduction URL

https://codepen.io/ThomasKro/pen/KwKzyoy?editors=101

How to reproduce?

  1. Go to the production Url
  2. Notice that there are no overflow arrows for the "align=right" example

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

No response

Quasar info output

Relevant log output

Additional context

No response

@ThomasKro ThomasKro added kind/bug 🐞 Qv2 🔝 Quasar v2 issues labels Feb 21, 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 Feb 21, 2025
@yusufkandemir yusufkandemir added bug/2-confirmed We have reproduce the problem and confirmed that this is a bug. and removed bug/1-repro-available A reproduction is available and needs to be confirmed. labels Feb 21, 2025
@yusufkandemir
Copy link
Member

Thanks for reporting.

I was able to reproduce the issue. scrollLeft is 0, so it doesn't show the left arrow.

pos = props.vertical === true ? content.scrollTop : Math.abs(content.scrollLeft)
if (isRTL.value === true) {
leftArrow.value = Math.ceil(pos + rect.width) < content.scrollWidth - 1
rightArrow.value = pos > 0
}
else {
leftArrow.value = pos > 0

Likely, the logic needs to be adjusted to not solely depend on scrollLeft.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/components bug/2-confirmed We have reproduce the problem and confirmed that this is a bug. flavour/quasar-cli-vite kind/bug 🐞 Qv2 🔝 Quasar v2 issues
Projects
None yet
Development

No branches or pull requests

2 participants