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: when direction is RTL hamburger menu appears on right side but animation comes from the left #30226

Open
3 tasks done
vicatcu opened this issue Mar 3, 2025 · 2 comments
Labels

Comments

@vicatcu
Copy link

vicatcu commented Mar 3, 2025

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

On a fresh repository generated using this command:
ionic start photo-gallery sidemenu --type=angular --capacitor

All I do is put the attribute dir="rtl" on the <ion-app> element, and the behavior becomes this:

side-menu.mp4

Expected Behavior

The menu should animate in from the right when dir="rtl" for the app.

Steps to Reproduce

  1. ionic start photo-gallery sidemenu --type=angular --capacitor
  2. Open src/app/app.component.html
  3. Change <ion-app> to <ion-app dir="rtl">
  4. npm start
  5. Open web browser and click the hamburger icon in the upper right
  6. Observe the behavior in the video above.

Code Reproduction URL

https://github.com/vicatcu/photo-gallery

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/home/vic/.nvm/versions/node/v18.20.2/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 8.4.3
@angular-devkit/build-angular : 19.2.0
@angular-devkit/schematics : 19.2.0
@angular/cli : 19.2.0
@ionic/angular-toolkit : 12.1.1

Utility:

cordova-res : 0.15.4
native-run : 2.0.1

System:

NodeJS : v18.20.2 (/home/vic/.nvm/versions/node/v18.20.2/bin/node)
npm : 10.5.0
OS : Linux 6.9

Additional Information

No response

@ionitron-bot ionitron-bot bot added the triage label Mar 3, 2025
@brandyscarney
Copy link
Member

Thanks for the issue! Is there a reason you can't set dir on the <html> element? We check for the document.dir in the code which is ltr if you set it on the <ion-app> element:

const isRTL = document.dir === 'rtl';

@brandyscarney brandyscarney added needs: reply the issue needs a response from the user and removed triage labels Mar 3, 2025
@vicatcu
Copy link
Author

vicatcu commented Mar 3, 2025

In my application (many applications?) it needs to be parametric/dynamically set based on a user preference setting and bindings aren't possible in index.html (as far as I know?).

@ionitron-bot ionitron-bot bot added triage and removed needs: reply the issue needs a response from the user labels Mar 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants