角垫形场不会变宽

Question

Summary: I want to widen the input box on my page.

When I Inspect, on the screen it says "div.mat-form-field-infix 300x51.5 and on the right it says a width: 180px; The actual input box says 300x24

Tried: After looking at angular 5 material - form fields stuck at 180px I tried the following:

<mat-form-field style="width:500px !important">

Then I tried:

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

.

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

Then I tried:

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

Code:

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>

Expected : To widen the input box

Actual : No change

Answer 1

Try ng-deep to replace the existing style

html code:

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

css code:

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

Answer 2

I guess it's an year late to answer, but the answer is a small change from what Imrul's answer says.

Try ng-deep with !important to override the style and apply whatever the default style is.

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

This would definitely give your expected answer and widen it.