Tabs problem with Right To Left
See original GitHub issueI am reporting two things that sound like a bug for me, but your experience can correct me if I’m wrong.
-
Using the
dir="rtl"
attribute for<html>
tag tells Material that the website is right to left. I use Material tabs and the direction, animation and arrow icons are not woking correctly for the right to left. Here is the screenshot: -
Plunker behavior is different than the real app! Take a look at the screenshot above and you should notice the problem with the RTL, I tried to made a Plunker to show the problem, but Plunker was showing it correctly, then I created a new empty project because I was seeing the RTL problem in Tabs in my real project and it was odd that how Plunker is showing it without any problem!
I deployed the newly made Angular project into GitHub pages to present the bug, I was thinking maybe Angular AOT compiler is making the problem but I’m not sure and I also get the same problem when I just use ng serve
Note: I use Bootstrap-rtl for the RTL project, then I added it to the project. (both Plunker and real project have it)
Real app example: Live | Source Plunker demo: Live
They both are almost the same, and they use same libraries but somehow Plunker works and the real app is not working!
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
@angular/cli: 1.1.0
node: 6.10.3
os: linux x64
@angular/animations: 4.2.5
@angular/common: 4.2.5
@angular/compiler: 4.2.5
@angular/core: 4.2.5
@angular/forms: 4.2.5
@angular/http: 4.2.5
@angular/material: 2.0.0-beta.7
@angular/platform-browser: 4.2.5
@angular/platform-browser-dynamic: 4.2.5
@angular/router: 4.2.5
@angular/cli: 1.1.0
@angular/compiler-cli: 4.2.5
@angular/language-service: 4.2.5
Is there anything else we should know?
I found a question on StackOverflow which was odd for me and maybe that gives you insight into what’s happening! The question
It’s also possible the problem be from the different version of the project, but I’m using the all stable versions of Angular and dependencies. Not sure about the Plunker template provided by Material itself.
@EladBezalel you know about RTL problems and could you please take a look?
Issue Analytics
- State:
- Created 6 years ago
- Comments:7 (3 by maintainers)
Top GitHub Comments
@m98 rtl on
html
orbody
would be supported in the next release, in the meantime you can put inside yourapp-root
dir=rtl
😃 hope that helps, In your plunker you usematerial2-builds
which is master and notbeta7
This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.