mat-form-field with appearance outline doesn't work well

2
votes

i change body direction to rtl. dir="rtl"

and mat-form-field with appearance"outline" doesn't work well.

you can try it in https://material.angular.io site, in Form field examples, Form field appearance variants section, and edit on stack,and change body direction to RTL.

you see which It doesn't work properly

example

UPDATE:

This Problem was from Angular Material and fixed now

2
angulartypescriptangular-materialangular8mat-form-field
I can't see any question at all? This looks more like a bug report of which I'm not sure that SO is the place to put it... - Fy Z1K

2 Answers

3
votes

I had the same problem with Dari (Persian) language which is RTL too. The fix I could find was the set the version of material and the angular related packages to exact match, i.e. remove ^ and ~ prefix from the versions of the packages in package.json.

My package.json looks as follows:

"dependencies": {
    "@angular-devkit/core": "8.0.6",
    "@angular/animations": "8.0.3",
    "@angular/cdk": "8.1.1",
    "@angular/common": "8.2.14",
    "@angular/compiler": "8.2.14",
    "@angular/core": "8.2.14",
    "@angular/flex-layout": "8.0.0-beta.26",
    "@angular/forms": "8.2.14",
    "@angular/http": "7.2.7",
    "@angular/material": "8.0.1",
    "@angular/material-moment-adapter": "5.0.0-rc.1",
    "@angular/platform-browser": "8.2.14",
    "@angular/platform-browser-dynamic": "8.2.14",
    "@angular/router": "8.2.14"
}

Once edited the package.json, remove the package-lock.json and node_modules and do npm i

1
votes

app.module

import { BidiModule } from '@angular/cdk/bidi';

imports: [...
        BidiModule
    ...]

your.component

<mat-form-field dir="rtl" appearance="outline">...</mat-form-field>