Components: Checkbox problem in RTL on scrolling page

[mbnsoft]

RTL direction in css as below:

html {
   direction: rtl;
}

If vertical scrollbar visible on the page, checkbox border move to left:

I have this problem with dir attribute on html tag also, thanks in advance.

[devversion]

I just took a quick look at that issue.

At first I came up with a solution like

/**
 * Temporary mixin to detect whether the current selector is inside of an RTL direction.
 * This can be removed in the future when a service takes control over the RTL detection.
 */
@mixin if-rtl() {
  [style*="direction:rtl"] &, [dir='rtl'] & {
    @content;
  }
}

But that approach only works for the inline style of direction: rtl - So it's not the solution.

I think now would be a good point to consider creating the RTL service, which detects RTL from the computed style.

There must be some discussion about that, since computed style can damage the performance significant.

But the correct approach would be definitely using the computed style.

I thought about a directive, which will be applied to the components root element, and then toggles a class for RTL when the upper direction changed.

[mbnsoft]

I found a solution, parent scroll container must set force overflow in css:

html {
   direction: rtl;
}

#container {
   overflow: auto;
}

<md-sidenav-layout fullscreen>
   <md-sidenav #sidenav mode="side" align="end" opened="true">
      ...
   </md-sidenav>
   <div id="container">
      ...
   </div>
</md-sidenav-layout>

[eladh]

Hi @mbnsoft .
its seems working with the latest release.

see - example

@EladBezalel

goodnessSquad

[EladBezalel]

@eladh Thanks !

[mbnsoft]

Hi @eladh
Yes it's works correctly, Thanks!

[angular-automatic-lock-bot[bot]]

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