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

Sidenav still hiding text in RTL mode #646

Closed
theunreal opened this issue Jun 7, 2016 · 9 comments
Closed

Sidenav still hiding text in RTL mode #646

theunreal opened this issue Jun 7, 2016 · 9 comments

Comments

@theunreal
Copy link

theunreal commented Jun 7, 2016

Do you want to request a feature or report a bug?
bug.
This bug is already reported by me, and as the last update of angular 2 material - which had to fix this bug - it actually didn't fix.
#411

What is the current behavior?
In RTL (Right-to-left) versions of a page, the sidenav content starts inside the sidenav and blocked by it.

If the current behavior is a bug,
master.html:
<md-sidenav-layout> <md-sidenav #start mode="side" [opened]="true"> <sidebar></sidebar> </md-sidenav>

sidebar.html:

<md-toolbar color="primary">Some info</md-toolbar>
  <div class="content">
     Hello, I'm a Sidenav!
 </div>

What is the expected behavior?
Sidenav Content should start from the end of the sidenav (the end in RTL versions, is the left side of it)

What is the motivation / use case for changing the behavior?

Text and other element shouldn't be hidden inside the sidenav
support RTL pages

Which version of Angular and Material, and which browser and OS does this issue affect?
Angular material 2.0.0-alpha5-2
Cross platform (Bug on IE/FF/Chrome)

Other information

image

image

@robertmesserle
Copy link
Contributor

@theunreal Can you provide a Plunkr or link so that I can see it failing? I am unable to recreate your issue so far.

@robertmesserle
Copy link
Contributor

Closing for now, will reopen if a Plunkr or demo is added.

@robertmesserle robertmesserle self-assigned this Jun 9, 2016
@theunreal
Copy link
Author

@theunreal
Copy link
Author

Notice that:
image

@robertmesserle
Copy link
Contributor

This is because the Dir directive is required for RTL support to work properly. In order to make this Plunkr work, you would need to:

  • Add an import for Dir: import {Dir} from '@angular2-material/core/rtl/dir';
  • Include that in your directives list: directives: [MD_SIDENAV_DIRECTIVES, Dir],
  • Add it to your template: <md-sidenav-layout dir="rtl">

This is not really documented yet, and is something that we are going to have to make more obvious.

@robertmesserle
Copy link
Contributor

@theunreal I opened an issue to make this more obvious here #679

@theunreal
Copy link
Author

Thanks for the quickfix @robertmesserle! Hope it can work without any additional lines of code in the near future.

@alirezamirian
Copy link

@robertmesserle
I have an apply-dir directive which adds dir attribute to elements based on current language. MdSidenav direction doesn't work with this kind of dynamic dir setting.

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 5, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants