文本区域元素不会扩展其宽度的 100%

Question

当我在实现角度材料库的过程中，我正在学习 Angular JS 8。我发现文本区域元素没有扩展到 100% 宽度

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

也尝试使用Boxssize，但没有任何用处。

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

尝试为mat-form-field提供width: 100%，这是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的样式而不是文本区域

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;
}