Angular Flex Layout: как установить ширину формы для родительского контейнера? - PullRequest
Новая
       15

Angular Flex Layout: как установить ширину формы для родительского контейнера?

0 голосов
/ 01 января 2019

Форма в коде ниже не отображается должным образом.Я хочу, чтобы он заполнил весь контейнер (что, как я полагаю, обычно делает Angular Flex Layout), но вместо этого он заполняет только около трети всего контейнера.enter image description here

Я пытался применить «size: 100%» к форме, div и mat-form-field, но ни один из этих методов не работает.

<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">
    <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"></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">Submit</button>
  </form>
</div>

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

</div>
...