Тег <mat-form-field> ограничивает ширину формы и не соответствует ширине контейнера

Question

Я редактирую форму, используя Angular, но она не работает хорошо.Когда я отлаживал его с помощью инструмента Chrome dev, я обнаружил, что поле mat-form-field ограничивает ширину области ввода, и я не вставлял CSS-код для указания ширины.

Ширина формы и тега p: 460, ширина поля mat-form-field: 180. Я не использовал стиль в коде, кроме части контейнера.

<div class="container"
fxLayout="row"
fxLayout.sm="column"
fxLayout.xs="column"
fxLayoutAlign.gt-md="space-around center"
fxLayoutGap="20px" 
fxLayoutGap.xs="0">

<div fxFlex *ngIf="dish">
...
</div>

<div fxFlex *ngIf="dish" class="full-width">
    <h3>
      <b>Comments</b>
    </h3>
    <mat-list *ngIf="dish.comments">
        <mat-list-item *ngFor="let comment of dish.comments">
          <p matline>
          <span>{{comment.comment}}<br></span>
          <span>{{comment.rating}} Stars<br></span>
          <span>-- {{comment.author}} {{comment.date | date}}</span>
          </p>
      </mat-list-item>
    </mat-list>

    <form novalidate #fform="ngForm" [formGroup]="commentForm" (ngSubmit)="onSubmit()">
    <p>
      <mat-form-field>
        <input matInput formControlName="name" placeholder="name" type="text" required>
        <mat-error *ngIf="formErrors.name">{{formErrors.name}}</mat-error>
      </mat-form-field>
    </p>
    <p>
      <mat-slider thumbLabel tickInterval="1" min="0" max="5" value="5"></mat-slider>
    </p>
    <p>
      <mat-form-field>
        <textarea matInput formControlName="comment" placeholder="comment" rows=8 required></textarea>
        <mat-error *ngIf="formErrors.comment">{{formErrors.comment}}</mat-error>
      </mat-form-field>
    </p>
      <button type="submit" mat-button class="background-primary text-floral-white" [disabled]="!commentForm.valid">Submit</button>
  </form>
</div>

<div [hidden]="dish">
  <mat-spinner></mat-spinner><h4>Loading . . . Please Wait</h4>
</div>

Я хочу сопоставить ширину поля формы коврика с шириной формы, от 180 до 460Как я могу это сделать?

Answer 1

Применить width: 100% к элементу mat-form-field; это заставит это соответствовать ширине его родителя. Возможно, вам придется немного поиграть со стилем содержащихся элементов, чтобы получить именно тот вид, который вы хотите.