Радио-кнопка мат не работает должным образом, когда направление диалогового окна мат RTL - PullRequest
Новая
       22

Радио-кнопка мат не работает должным образом, когда направление диалогового окна мат RTL

1 голос
/ 31 марта 2020

У меня вопрос, как я могу использовать мат-радио-кнопку внутри диалогового окна RTL?

Вот подробности:

Когда я изменил конфигурацию Mat Dialog на RTL, как показано ниже: 

  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));
        // }
    });
  }

переключатель с матом перестал работать должным образом: 1 - во-первых, прокрутка-x значительно расширилась, как показано ниже.

enter image description here

эта проблема исчезла при удалении мат-радио-кнопок из моей формы

2-секундная вещь, которую я не могу выбрать ни одну из них, оба радио-кнопки не выбраны, но когда моя форма была в LTR, я мог выбрать один из них, но в направлении RTL я не могу.

вот мой 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>

1 Ответ

0 голосов
/ 01 апреля 2020

Я понял. Это странная проблема, но когда я проверяю материализованный файл. css, который я нашел ниже CSS теги: 

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

То, что я делал, я просто комментировал, и все работало нормально! 

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

Обновление:

Аналогичная проблема для флажков, поэтому вы должны прокомментировать ниже css в материализации. css файл: 

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

Примечание: материализация версии Материализация v0,97,7 (http://materializecss.com)

...