RTL support?

[HarelM]

I'm not sure if I'm configuring this incorrect of that this library doesn't support RTL content.
The following is my layout html:

<div fxLayout="row" fxLayoutAlign="space-between none">
        <div fxFlex="20">
            <md-slide-toggle [(ngModel)]="advanced"></md-slide-toggle>
        </div>
        <div fxFlex="60">
            <span (click)="advanced = !advanced"><i class="fa icon-gear"></i> {{resources.toggleAdvancedSettings}}</span>
        </div>
        <div fxFlex>
            <div fxLayout="col" fxLayoutAlign="start end">
                <span class="cursor-pointer" (click)="closeSidebar()"><i class="fa fa-lg icon-close"></i></span>
            </div>
        </div>
    </div>

What I want to accomplish is close to the following:

Only the "X" in the image should be aligned to the end, which in RTL case is left instead of right.
I'm using angular 4 with [dir]="rtl" directive so I was hoping this is in sync with angular's RTL support...

[HarelM]

Sorry, my mistake.
Here is the correct code:

<div fxLayout="row" fxLayoutAlign="none none">
        <div fxFlex="20">
            <md-slide-toggle [(ngModel)]="advanced"></md-slide-toggle>
        </div>
        <div fxFlex="60">
            <span (click)="advanced = !advanced" class="cursor-pointer"><i class="fa icon-gear"></i> {{resources.toggleAdvancedSettings}}</span>
        </div>
        <div fxFlex>
            <div fxLayout="col" fxFill>
                <span fxFill fxLayoutAlign="end start" class="cursor-pointer" (click)="closeSidebar()"><i class="fa fa-lg icon-close"></i></span>
            </div>
        </div>
    </div>

[HarelM]

Well, now I'm not sure again...
The offset seems to be in the wrong place:

The css of the above elements shows:

element.style {
    flex: 1 1 100%;
    box-sizing: border-box;
    -webkit-box-flex: 1;
    max-width: 75%;
    margin-left: 15%;
}

setting margin-right:15% solves this, but I'm not sure how to really solve this, does seems like a bug.
the following is the html:

<div fxFlexOffset="15" fxFlex="75">
            <span>{{resources.addBaseLayer}}</span>
        </div>

[ThomasBurleson]

@HarelM - We need a Plunkr to test and validate against. Thx.

[HarelM]

remove the dir="'rtl'". when putting it back on you should get a mirror image of the ltr version.
https://plnkr.co/edit/Pdmk94iCqGjmquDPcfU3?p=preview
This is not the case.
I haven't fully checked all other scenarios and it does feel that it's not exactly mirroring as it should but I don't have another case to show currently.

[ThomasBurleson]

Thx. We will investigate.

…

On Thu, May 25, 2017, 5:00 PM Harel M ***@***.***> wrote: remove the dir="'rtl'". when putting it back on you should get a mirror image of the ltr version. https://plnkr.co/edit/Pdmk94iCqGjmquDPcfU3?p=preview This is not the case. I haven't fully checked all other scenarios and it does feel that it's not exactly mirroring as it should but I don't have another case to show currently. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#274 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAM17W4MG18fp5ZVS-yeByboFXK2cPyfks5r9foPgaJpZM4NOsqj> .

[Eddygn]

Hi,

Any (non manual CSS) workaround/solution for this issue ?

https://plnkr.co/edit/HOuHtMbH6mznoQpgHl6a?p=preview

[HarelM]

The following is another issue I now see with the RTL support:

FlexLayoutGap="10px" inside a [dir]="'rtl'"
margin-right="10px" is added

Expected behavior:
margin-left="10px" should be used in this case

Version: 2.0.0-beta.9

basically the following code, thought not fully tested:

<div  [dir]="'rtl">
  <div fxLayout="row" fxLayoutGap="10px">
    <div fxFlex="70">
      the gap is before this element instead of after
    </div>
    <div fxFlex>
       Should be a gap between this and the previous one
    </div>
  </div>
</div>

[axmad22]

Did you find a solution to this, by the way this happens even with fxLayout="row-reverse", it places the gap on the wrong side

[HarelM]

The workaround I found was to use css instead, I know this is a poor workaround but unfortunately I don't have time to fix the bug here...

[atscott]

Can I ask why this was set to P5? This seems very important in order to support RTL languages.

[Eddygn]

Looks like the plunkers no longer work, so here the same with the stackblitz template.

https://stackblitz.com/edit/angular-flex-layout-seed-eb7gve?file=app/test.component.ts

As of now, unfortunately, in practice it can't be used in RTL, it's easier to just use pure CSS (or any other solution).

[atscott]

Thanks for the demo!
I would really like to help fix this problem, as it's more like a P1 for any team (including my own) that needs to support RTL.
At least a partial fix seems relatively straightforward. The material2 library has this injectable for looking at the direction on the document/body: https://github.com/angular/material2/blob/master/src/cdk/bidi/directionality.ts
If this library had a similar one and then simply set margin-left in layout-gap instead of margin-right and margin-right instead of margin-left in flex-offset, that would be really helpful.

Unfortunately, I can't get the tests to run so I can't really make much progress on this myself.

Edit/Update: I fixed the broken tests by installing rxjs 5.5.0 instead of 5.5.5 so I'll be working on this today.

[angular-automatic-lock-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.}