Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tabs problem with Right To Left

See original GitHub issue

I 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

1reaction

EladBezalelcommented, Jul 2, 2017

@m98 rtl on html or body would be supported in the next release, in the meantime you can put inside your app-root dir=rtl 😃 hope that helps, In your plunker you use material2-builds which is master and not beta7

0reactions

angular-automatic-lock-bot[bot]commented, Sep 6, 2019

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.}