mat-list-item重叠中的mat-form-field

Question

我正在实现。 Firebase登录的用户界面。为此，我正在使用angular material。

为了在用户端进行更轻松的输入校正，我想实现mat-hint以便用户在每次用户键入不期望的内容时显示错误。

<mat-card>
  <mat-card-header>
    <mat-card-title>Login</mat-card-title>
    <mat-card-subtitle>Log into your existing account</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <mat-list>
      <mat-divider></mat-divider>
      <h3 mat-subheader>Profile</h3>
      <mat-list-item>
        <mat-icon mat-list-icon>alternate_email</mat-icon>
        <mat-form-field mat-line class="width-100">
          <input matInput placeholder="Email" [(ngModel)]="email" [formControl]="emailFormControl"
            [errorStateMatcher]="matcher" />
          <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
            Please enter a valid email address
          </mat-error>
          <mat-error *ngIf="emailFormControl.hasError('required')">
            Email is <strong>required</strong>
          </mat-error>
        </mat-form-field>
      </mat-list-item>
      <mat-list-item>
        <mat-icon mat-list-icon>security</mat-icon>
        <mat-form-field mat-line class="width-100">
          <input matInput #passwordtest type="password" placeholder="Password" [(ngModel)]="password" />
          <mat-hint align="end" *ngIf="passwordtest.value.length < 6">{{passwordtest.value.length}} / 6 or more</mat-hint>
        </mat-form-field>
      </mat-list-item>
      <mat-divider></mat-divider>
    </mat-list>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button (click)="login(email, password)">Login</button>
  </mat-card-actions>
</mat-card>

但是似乎mat-form-field和mat-hint和占位符的设计并不是为了在mat-list-item内工作，因为结果看起来像这样。

如果我删除了mat-list-item（以及mat-form-field前面的小图标），则提示和占位符不会重叠。

如您所见，由于子标题与表单字段未对齐，结果也不是很好。另外，我认为第一种选择（带有重叠部分）由于图标少而看起来更好。

我想知道在这种情况下我会选择什么，因为我不想通过添加其他边距或填充来破坏材料设计。但是，我想这是预期的行为，我做错了什么。

如何设计这种用户界面，使带有提示和占位符的输入字段不重叠？

Answer 1

您可以使用.mat-list-item来提高!important的高度，如下所示：

.mat-list-item {
    height: 80px !important; /** experiment with height **/
}

一种更好的方法是为样式提供更高的特异性（即为样式中的每个list-item添加一个额外的类）。

.custom-class .mat-list-item {
    height: 80px;
}

另一种方法是在mat-form-field的左侧添加填充以匹配标头的填充。

Answer 2

<mat-list-item style="height:auto" *ngFor="let item of itemList"> ..

height：auto也对我有用。没有这个，我观察到重叠的文本。如果自动工作，那比固定像素值更好。