question-mark
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.

  1. 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: Screenshot

  2. 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:closed
  • Created 6 years ago
  • Comments:7 (3 by maintainers)

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

right to left for Tab - Microsoft Community
Hi I put a Tab control on my form where it's default is left to right How can I change it to right...
Read more >
With Tabs layout set to show up on the left or right side, using ...
Set you tabs to show on the right. Use the Go To Definition action on something. You will not have a cursor. Try...
Read more >
Tab ruler is reading right to left - Adobe Support Community
Solved: I'm working on a client supplied document to do edits. The tab ruler is reading from right to left. I think the...
Read more >
Why are my bootstrap nav tabs not aligning to the left?
What is causing this issue? My goal is to get the tabs to align to the left side of the page, something like...
Read more >
How to set right tabs in Microsoft Word - YouTube
Need certain information lined up along the right edge rather than the left ? That's where you use right tabs !
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found