Question

摘要： 我想扩大页面上的输入框。

当我检查时，在屏幕上显示“ div.mat-form-field-infix 300x51.5，在右边显示宽度：180px；实际输入框显示为300x24

尝试过： 看完angular 5 material - form fields stuck at 180px后，我尝试了以下操作：

.input-full-width {
width: 400px;
}

然后我尝试：

<mat-form-field class="input-full-width">

。

.mat-form-field-infix {
width: 480px;
}

然后我尝试：

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

代码：

CSS：

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

HTML：

public async Task<ActionResult<Member>> GetMember(int id)

预期：扩大输入框

实际：不变

Answer 1

尝试ng-deep替换现有样式

html代码：

<mat-form-field class="width-480"></mat-form-field>

css代码：

::ng-deep .width-480{
    width: 480px;
}

Answer 2

我想回答已经晚了一年，但是答案与伊姆鲁尔的回答说的只是一个小变化。

尝试使用！important进行ng-deep改写样式并应用任何默认样式。

::ng-deep .width-480{
    width: 480px !important;
}

这肯定会给出您期望的答案并扩大答案。

角形垫区域不会变宽

2 个答案: