html - 角垫形式场不会扩大
问题描述
摘要: 我想在我的页面上加宽输入框。
当我检查时,屏幕上显示“div.mat-form-field-infix 300x51.5,右侧显示宽度:180px;实际输入框显示 300x24
尝试过: 在查看了angular 5 material - form fields 卡在 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;
}
推荐阅读
- optaplanner - Optaplanner:solver.getBestScore 和solver.explainBestScore 显示不同的结果?
- azure - 没有“通用数据服务”API 选项 Azure
- linux - 是否使用 Xvfb 运行 OpenGL 效果版本?
- reactjs - 如何更改 ContextualMenu 的默认图标
- linux - Imagemagick - 结合“裁剪”和“添加图层”参数
- ambari - 没有 Cloudera 订阅的 Ambari 集群设置
- python - 如何在 Keras 拟合输出中隐藏自定义层丢失
- python - 使用 Dask 从 CSV 文件中采样确切的行数
- python - python - 联合/合并嵌套字典和列表以获取值类型
- hybris - 如何在 impex 中为日期格式指定时区?