Angular material 角材料：为什么垫子形式不包垫子暗示里面？

我希望我的表单字段看起来正确。但是，第一个字段的提示文本与其下方的第二个字段相交，文本显示为脏文本。我的目标是分离这些重叠的文本。但我还没有找到解决方案。我怎样才能解决这个问题

我不希望表单看起来像图片中的那样

编辑：我正在使用他官方网站上建议的方法。

编辑2： userform.component.html

<div class="col-lg-8 mx-auto mt-5">
  <mat-card class="fullbar">
    <div class="card-header-bar">
      New User Form!
    </div>
    <mat-card-content class="mt-3 card-content-bar">

      <form [formGroup]="userGroup">

        <mat-form-field class="full-width">
          <input matInput placeholder="Username" formControlName="username">
          <mat-hint>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nibh dui, viverra quis lacinia
            non, volutpat vel nisi. Donec fringilla, sem id vestibulum semper, diam ligula venenatis ligula, nec
            malesuada nisi mi at lectus.
          </mat-hint>
        </mat-form-field>

        <mat-form-field class="full-width">
          <input matInput placeholder="Password" formControlName="password">
          <mat-hint>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nibh dui, viverra quis lacinia
            non, volutpat vel nisi. Donec fringilla, sem id vestibulum semper, diam ligula venenatis ligula, nec
            malesuada nisi mi at lectus.
          </mat-hint>
        </mat-form-field>


        <mat-form-field class="full-width">
          <input matInput placeholder="Age" formControlName="age">
          <mat-hint>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nibh dui, viverra quis lacinia
            non, volutpat vel nisi. Donec fringilla, sem id vestibulum semper, diam ligula venenatis ligula, nec
            malesuada nisi mi at lectus.
          </mat-hint>
        </mat-form-field>

      </form>

    </mat-card-content>
  </mat-card>
</div>

---

---

我想您需要将mat form字段的高度设置为auto。

我想您需要将mat form字段的高度设置为auto。

您的stackblitz不包含

mat hint

元素。请在stackblitz应用程序中举例说明您的提示。@leopal和@Mises我添加了完整的代码。除了

stackblitz.com

上的

命令外，其他很多东西都是一样的。由于我使用标准命令，如何解决这个问题？有一个公开的问题在讨论这个问题：stackblitz不包含

mat hint

元素。请在stackblitz应用程序中举例说明您的提示。@leopal和@Mises我添加了我的完整代码。除了

stackblitz.com

上的

命令外，其他很多东西都是一样的。由于我使用标准命令，我如何解决这个问题？讨论这个问题时有一个公开的问题：我尝试了这个

style=“height:auto”

，但没有成功。至于其他选项，如fit content，如果你能提供stackblitz来解决你的问题，那将是一件非常糟糕的事情。另外，设置它如何呢！重要信息？我也尝试了这个

style=“height:auto！important；”“

，但没有成功。我所有的代码都显示在

edit 2

部分。我没有不同的代码。我不知道什么是fit内容。我尝试了这个

style=“height:auto”

，但没有效果。其他选项，如fit内容，如果你能提供stackblitz，这将是一个很大的问题。还有，设置为！重要信息？我也尝试了这个

style=“height:auto！important；”“

，但没有成功。我所有的代码都显示在

edit 2

部分。我没有不同的代码。我不知道什么是fit内容。

.fullbar {
  padding: 0px;
  margin: 0px;
  margin-top: 75px;
  margin-bottom: 225px;
}

.card-header-bar {
  line-height: 50px;
  height: 50px;
  max-height: 50px;
  vertical-align: middle;
  padding-left: 15px;
  color: rgba(0, 0, 0, .54);
  background-color: #e7e5f7;
}

.card-content-bar {
  padding: 15px;
}

.full-width {
  width: 100%;
}