CODEWITHSUNDEEP
angularangular-materialplaceholder
AlejandroG
AlejandroG

Reputation: 21

placeholder transparent after uptade to angular material 6.4.7

After updating Angular Material from v6.0.1 to v6.4.7 all the mat-form-fields of the application has the class .mat-form-field-hide-placeholder that basically add the following code: -webkit-text-fill-color: transparent;

And now all the placeholders are transparent.

Screenshot of Chrome DevTools

this is an example of how we use placeholder with mat-form-field

<mat-form-field *ngIf="option">
    <mat-select class="irregularselector"
                [(ngModel)]="selectedOption"
                placeholder="Choose one..."
                (selectionChange)="onSelectedOption()">
        <mat-option *ngFor="let opt of irregularOpts;" value={{opt.uuid}}> 
            {{opt.name}}
        </mat-option>
    </mat-select>
 </mat-form-field>

Where we want to display the placeholder describe above.

Do you know why this is happening, or on how to avoid this class?

Upvotes: 1

Views: 338

Answers (1)

AlejandroG
AlejandroG

Reputation: 21

Ok, I have discovered that this behaviour is related with the new apearance of the mat-form-field that by default is legacy. If I choose standard the class mat-form-field-hide-placeholder disapear.

Upvotes: 1

Related Questions