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.

Sign up for GitHub

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

Jump to bottom

Multiselect checkboxes not aligning to the right in RTL #10023

Closed
philip-firstorder opened this issue Feb 19, 2018 · 3 comments
Closed

Multiselect checkboxes not aligning to the right in RTL #10023

philip-firstorder opened this issue Feb 19, 2018 · 3 comments

Comments

@philip-firstorder
Copy link

Bug, feature request, or proposal:

Multiselect checkboxes not aligning to the right in RTL

screen shot 2018-02-19 at 18 20 34

What is the expected behavior?

Checkboxes should align to the right

What is the current behavior?

Checkboxes are aligned to the left.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-5lqd6r?file=index.html

What is the use-case or motivation for changing an existing behavior?

Conform to the guidelines on bidirectionally.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"@angular/material": "^5.2.1",

Is there anything else we should know?
@crisbeto
Copy link
Member

The select does pick up the direction, but you need to set it either on the html, the body or an element inside the Angular app. In your example the dir is on an element outside of the app. That being said, there appears to be a weird visual glitch when it's in RTL on Chrome (the options shift around on click).

crisbeto added a commit to crisbeto/material2 that referenced this issue Feb 19, 2018
@crisbeto
fix: avoid layout jumping on elements with ripples in RTL
27c29a2 
A while ago we added a `backface-visibility` to some components that have scrollable content in order to avoid repaints while scrolling (see angular#7889, angular#7721, angular#7719, angular#6890, angular#2156) which worked at the time, however in the more recent versions of Chrome it causes the content in RTL mode to shift whenever a child has a transform that is being animated (in our case it's usually ripples). These changes revert the `backface-visibility` in order to avoid the jumping, until we can find a better solution.

Relates to angular#10023.
@crisbeto crisbeto mentioned this issue Feb 19, 2018
Merged
@philip-firstorder
Copy link
Author

@crisbeto Solution worked, thanks.

Maybe explain this also in the documentation on how to set the dir value:
https://material.angular.io/cdk/bidi/overview

crisbeto added a commit to crisbeto/material2 that referenced this issue Feb 21, 2018
@crisbeto
chore(bidi): update docs to be explicit about only looking at element…
2f37c71 
…s within Angular

Updates the bidi docs to mention that we only look at `dir` attributes inside of the user's app.

Relates to angular#10023.
@crisbeto crisbeto mentioned this issue Feb 21, 2018
Merged
jelbourn pushed a commit that referenced this issue Feb 26, 2018
@crisbeto @jelbourn
fix: avoid layout jumping on elements with ripples in RTL (#10026)
900716a 
A while ago we added a `backface-visibility` to some components that have scrollable content in order to avoid repaints while scrolling (see #7889, #7721, #7719, #6890, #2156) which worked at the time, however in the more recent versions of Chrome it causes the content in RTL mode to shift whenever a child has a transform that is being animated (in our case it's usually ripples). These changes revert the `backface-visibility` in order to avoid the jumping, until we can find a better solution.

Relates to #10023.
mmalerba pushed a commit to mmalerba/components that referenced this issue Feb 26, 2018
@crisbeto @mmalerba
fix: avoid layout jumping on elements with ripples in RTL (angular#10026
db28487 
)

A while ago we added a `backface-visibility` to some components that have scrollable content in order to avoid repaints while scrolling (see angular#7889, angular#7721, angular#7719, angular#6890, angular#2156) which worked at the time, however in the more recent versions of Chrome it causes the content in RTL mode to shift whenever a child has a transform that is being animated (in our case it's usually ripples). These changes revert the `backface-visibility` in order to avoid the jumping, until we can find a better solution.

Relates to angular#10023.
jelbourn pushed a commit to jelbourn/components that referenced this issue Feb 27, 2018
@crisbeto @jelbourn
fix: avoid layout jumping on elements with ripples in RTL (angular#10026
c93103b 
)

A while ago we added a `backface-visibility` to some components that have scrollable content in order to avoid repaints while scrolling (see angular#7889, angular#7721, angular#7719, angular#6890, angular#2156) which worked at the time, however in the more recent versions of Chrome it causes the content in RTL mode to shift whenever a child has a transform that is being animated (in our case it's usually ripples). These changes revert the `backface-visibility` in order to avoid the jumping, until we can find a better solution.

Relates to angular#10023.
@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 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@crisbeto @philip-firstorder