Question

我正在实施角度材料库时正在学习Angular JS 8。我发现Textarea元素没有扩展到100％宽度

这是Broswer问题，但我也没有在Firefox浏览器中找到相同的显示。

也尝试过Boxsizing，但没有任何用处。

mat-card {
  width: 80%;
  margin: auto;
}

textarea {
  width: 100%;
  -webkit-box-sizing: border-box;
  /* <=iOS4, <= Android  2.3 */
  -moz-box-sizing: border-box;
  /* FF1+ */
  box-sizing: border-box;
  /* Chrome, IE8, Opera, Safari 5.1*/
}

<mat-card>
  <mat-form-field>
    <textarea matInput rows='6' [(ngModel)]="enteredValue"> 
      </textarea>
  </mat-form-field>
  <br>
  <button mat-raised-button color="primary" (click)="onAddPost()">Save Post</button>
</mat-card>

<p>{{ newPost }}</p>

https://drive.google.com/file/d/1Eyckr_JffJdMRnOtR2dFHI3scx9qDATN/view?usp=sharing

请找到上面的图片，该图片显示了我希望我的文本区域如何扩展

Answer 1

尝试为width: 100%赋予mat-form-field，这是textarea的父元素。

<mat-card>
  <mat-form-field style="width: 100%">
      <textarea matInput rows = '6' [(ngModel)] = "enteredValue"> 
  </textarea>
  </mat-form-field>
   <br>
   <button
  mat-raised-button
  color ="primary"
 (click)="onAddPost()">Save Post</button>
</mat-card>

<p>{{ newPost }}</p>

Answer 2

根据您的示例，使用mat-form-field样式而不是text-area

mat-form-field{
  width: 100%;
}

如果有多个表单字段，我宁愿使用display: flex; flex-direction: column;;样式的包装器

<mat-card>
  <section class="form-container">
    <mat-form-field>
      <textarea matInput rows='6' [(ngModel)]="enteredValue"></textarea>
    </mat-form-field>
  </section>
</mat-card>

.form-container{
  display: flex;
  flex-direction: column;
}

Textarea元素不会扩展其宽度的100％

2 个答案: