angular - 这标签限制了表单的宽度,与容器的宽度不匹配
问题描述
我正在使用 Angular 编辑表单,但效果不佳。使用Chrome开发工具调试的时候发现mat-form-field限制了输入区域的宽度,而我没有放任何CSS代码来指定宽度。
form和p标签的宽度:460,mat-form-field的宽度:180。除了容器部分,我没有给代码添加任何样式。
<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" class="full-width">
<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" value="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" [disabled]="!commentForm.valid">Submit</button>
</form>
</div>
<div [hidden]="dish">
<mat-spinner></mat-spinner><h4>Loading . . . Please Wait</h4>
</div>
我想将 mat-form-field 宽度与表单宽度相匹配,从 180 到 460。我该怎么做?
解决方案
将 awidth: 100%
应用于 mat-form-field 元素;这将导致它匹配其父级的宽度。您可能需要对包含元素的样式进行一些调整,以获得您想要的确切外观。
推荐阅读
- excel - PowerBi 桌面
- vue.js - 如何使用 vuex-flash 消息?
- python - 获取第二个窗口将变量传递给主 ui 并关闭
- r - R ggplot 结合了颜色的图例和填充不同的因子长度
- javascript - 如何在 chart.js 中显示条形图?
- go - 多路复用路由器在 debian 拉伸(linux)上返回错误 503,适用于 Windows 10
- python - D&D 骰子程序(无循环)
- javascript - Headless Chrome Puppeteer:告诉 Puppeteer 准备好的页面
- scala - 如何使用参数化值初始化寄存器
- java - Selenium wedriver:并行执行抛出'org.openqa.selenium.NoSuchSessionException:无效的会话ID'