Search code examples
angular-materialmaterialize

mat-radio-button doesn't work properly when mat-dialog direction is RTL

My question is how could I use the mat-radio-button inside RTL mat-dialog?

Here are the details:

When I changed the Mat Dialog configuration to RTL such below :

  private showCreateOrEditDialog(id?: number): void {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.width="100%";
    dialogConfig.height="100%";
    dialogConfig.maxWidth='100vw';
    dialogConfig.maxHeight='100vh';
    dialogConfig.disableClose=true;
    dialogConfig.direction="rtl";  //<========= if I change it to ltr everything // working fine



    let createOrEditDialog;
    if (id === undefined || id <= 0) {
      createOrEditDialog = this._dialog.open(CreateComponent,dialogConfig);
    } else {
      createOrEditDialog = this._dialog.open(EditComponent, {
            data: id
        });
    }

    createOrEditDialog.afterClosed().subscribe(result => {
        // if (result) {
        //   this.rerender(Number(this.selecteddCity));
        // }
    });
  }

the mat-radio-button stop working properly : 1- first thing the scroll-x extended to much such below screen shoot.

enter image description here

this problem disappeared when removing the mat-radio-buttons from my form

2- second thing I can't select any one of them, both mat-radio-button not selected but when my form was in LTR I were could choose one of them but in RTL direction I cant.

here is my angular :

<form autocomplete="off" #createModal="ngForm" (ngSubmit)="save()">
    <h1 mat-dialog-title>Create New </h1>
    <mat-dialog-content style="width: 100%;height:100%;">
      <mat-tab-group>
        <mat-tab [label]="'GeneralInformation' | localize">
            <div class="row"> 
<div class="col-md-4" >
  <mat-form-field >
  <mat-radio-group aria-label="Select an option" labelPosition="before"  name='Readiness'  required> 
      <mat-radio-button class='Readiness'  [value]="1" >ready</mat-radio-button>
      <mat-radio-button class='Readiness'  [value]="0" >not ready</mat-radio-button>
    </mat-radio-group>
    <label id="Readiness-ID">Readiness</label>
  </mat-form-field>
  </div>
</div>
</mat-tab>
</mat-tab-group>
</mat-dialog-content>
 <div mat-dialog-actions align="end">
      <button mat-button type="button" [disabled]="saving" (click)="close(false)">
        {{ "Cancel" | localize }}
      </button>
      <button
        mat-flat-button
        type="submit"
        flex="15"
        color="primary"
        [disabled]="!createModal.form.valid || saving">
       Save
      </button>
    </div>
  </form>
Solution

  • I got it . its a weird problem but when I check the materialize.css file I found below CSS tags :

    [type="radio"]:not(:checked),
[type="radio"]:checked {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

    What I did simply I commented them and every thing working fine !

    /* Radio Buttons
   ========================================================================== */
/* [type="radio"]:not(:checked),
[type="radio"]:checked {
  position: absolute;
  left: -9999px;
  opacity: 0;
} */

    Update:

    Similar problem for Checkboxes,so, you should comment below css in materialize.css file :

    /* [type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
  opacity: 0;
} */

    Note: materialize version is Materialize v0.97.7 (http://materializecss.com)