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

[Bug Report] VMenu wrong alignment with RTL on #12195

Closed
abdu-udwz opened this issue Sep 8, 2020 · 1 comment · Fixed by #14556
Closed

[Bug Report] VMenu wrong alignment with RTL on #12195

abdu-udwz opened this issue Sep 8, 2020 · 1 comment · Fixed by #14556
Assignees
Labels
C: VMenu VMenu rtl T: bug Functionality that does not work as intended/expected
Milestone

Comments

@abdu-udwz
Copy link

abdu-udwz commented Sep 8, 2020

Environment

Vuetify Version: 2.3.10
Vue Version: 2.6.12
Browsers: Chrome 84.0.4147.135
OS: Linux x86_64

Steps to reproduce

  • use VMenu with a button activator or any other activator (especially containing long items)
  • setting $vuetify.rtl to true

Expected Behavior

the start (right in RTL) edge of the menu should be aligned along with the activator start edge, like LTR behavior, see MENU#2 in reproduction link

Actual Behavior

the end (left) edge of the menu aligned with the end edge of the activator

Reproduction Link

https://codepen.io/AbdulhamidZoubi/pen/yLOvbLb

Other comments

as a workaround, using the left prop on VMenu when vuetify.rtl is true solves the issue. but it is ridiculous to include this line on every menu in the application

I'm don't have enough knowledge and I'm not sure, but I think these lines in "VMenu.ts" can be updated to account for RTL

...
calculatedLeft (): string {
      const menuWidth = Math.max(this.dimensions.content.width, 
      parseFloat(this.calculatedMinWidth))

      if (!this.auto) return this.calcLeft(menuWidth) || '0'

      return convertToUnit(this.calcXOverflow(this.calcLeftAuto(), menuWidth)) || '0'
    },
...
@ghost ghost added the S: triage label Sep 8, 2020
@KaelWD KaelWD added T: bug Functionality that does not work as intended/expected and removed S: triage labels Aug 11, 2021
@KaelWD KaelWD self-assigned this Aug 11, 2021
@KaelWD KaelWD added this to the v3.0.0 milestone Aug 11, 2021
@KareemDa
Copy link
Contributor

@KaelWD
Is making left prop as default in RTL mode considered as valid solution?

KareemDa added a commit to KareemDa/vuetify that referenced this issue Dec 31, 2021
KareemDa added a commit to KareemDa/vuetify that referenced this issue Dec 31, 2021
@KaelWD KaelWD modified the milestones: v3.0.0, v2.6.x Jan 19, 2022
KaelWD pushed a commit that referenced this issue Jan 19, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VMenu VMenu rtl T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants