[英]Angular mat-form-field will not widen
总结:我想加宽我页面上的输入框。
当我检查时,屏幕上显示“div.mat-form-field-infix 300x51.5,右侧显示宽度:180px;实际输入框显示 300x24
尝试过:在查看了angular 5 材质 - 表单字段停留在 180px 后,我尝试了以下操作:
<mat-form-field style="width:500px !important">
然后我尝试:
.input-full-width {
width: 400px;
}
.
<mat-form-field class="input-full-width">
然后我尝试:
.mat-form-field-infix {
width: 480px;
}
代码:
CSS:
@import '../../../../form-elements.css';
.l-card {
width: 80%;
max-width: 80rem;
}
.logo > img {
display: block;
max-height: 7rem;
max-width: 30rem;
margin: 1rem auto 3rem auto;
}
.mat-radio-button {
display: block;
margin: 1rem auto;
}
.mat-radio-button > ::ng-deep.mat-radio-label {
white-space: normal;
word-break: break-all;
align-items: flex-start;
}
@media screen and (min-width: 1000px) and (min-height: 600px) {
.l-card {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
margin: 0;
}
}
.example-container {
display: flex;
flex-direction: column;
}
.example-container > * {
width: 500px;
}
HTML:
<div fxLayoutAlign="center center" *ngIf="!isLoad">
<mat-spinner></mat-spinner>
</div>
<div *ngIf="isLoad">
<p>
Would you prefer to receive the verification code by text message or by email?
</p>
<form [formGroup]="_form">
<div class="center-and-left">
<mat-radio-group>
<mat-radio-button (change)=sO($event) value="phone">Text {{ phone }}</mat-radio-button>
<mat-radio-button (change)=sO($event) value="email">Email {{ email}}</mat-radio-button>
</mat-radio-group>
</div>
<button type="button" mat-raised-button color="primary" (click)="sendC()" [(disabled)]="isDisabled" >Send Code</button>
<div fxLayoutAlign="center start" *ngIf="!isLoaded && showSpinner">
<mat-spinner></mat-spinner>
</div>
<div *ngIf="isLoaded">
<br />
<div class="example-container">
<mat-form-field>
<input matInput (keyup)="someCode($event.target.value)" (keyup.enter)="onSubmit()" type="number" max="6" min="6" placeholder="Please enter verification code" formControlName="code" required>
</mat-form-field>
</div>
<p *ngIf="failedVerfication" class="error">Verification failed. Please retry or press Send Code to have a new code sent to you.</p>
<button mat-raised-button color="primary" type="button" (click)="onSubmit()" [disabled]="isDisabledSubmit">Verify and Sign In</button>
</div>
预期:加宽输入框
实际:无变化
尝试使用 ng-deep 替换现有样式
html代码:
<mat-form-field class="width-480"></mat-form-field>
css代码:
::ng-deep .width-480{
width: 480px;
}
我想回答晚了一年,但答案与 Imrul 的回答相比略有不同。
尝试 ng-deep 与 !important 覆盖样式并应用任何默认样式。
::ng-deep .width-480{
width: 480px !important;
}
这肯定会给出您预期的答案并扩大它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.