Adjusting height of mat-form-field Angular Material
11,056
Need to overwrite css
<div class="mat-form-field-infix">
<input class="mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored" ma
tinput="" placeholder="Enter First name"
ng-reflect-placeholder="Enter First name" id="mat-input-0" aria-describedby="mat-hint-0" aria-invalid="false" aria-required="false">
<span class="mat-form-field-label-wrapper">
<label class="mat-form-field-label id="mat-form-field-label-1" for="mat-input-0" aria-owns="mat-input-0">
<mat-label _ngcontent-nbv-c4="" class="ng-star-inserted">First Name</mat-label>
</label>
</span>
</div>
style overwrite
.mat-form-field-appearance-outline .mat-form-field-infix {
padding: 10px;
}
.mat-form-field-infix {
padding:0;
border-top: 0;
}
//change top and padding-top as per required
.mat-form-field-label-wrapper {
top: -0.84375em;
padding-top: 0.84375em;
}
Author by
GlitchEclipse
Updated on December 08, 2022Comments
-
GlitchEclipse over 1 year
I am running into an issue with a simple adjust of a mat-form-field that holds my autocomplete input. From the image you can see if it's outside the mat-toolbar height, but I have not found a simple way to adjust the height of the entire input so it can stay inside the toolbar area. Width works fine. Height does not.
My html code is as follows:
<mat-toolbar > <span style="width:200px">Test</span> <label>{{prodPointId}}</label> <form class="example-form" > <mat-form-field appearance="outline" margin=" 10px" class="example-full-width searchField" > <mat-label>Search...</mat-label> <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto" [(ngModel)]="value" > <button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''"> <mat-icon>close</mat-icon> </button> <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn"> <mat-option *ngFor="let option of filteredOptions | async" [value]="option.prodPointName" (click)="pointSelected(option.prodPointId)" [routerLink]="['/coredata', option.prodPointId]" > <mat-icon>home</mat-icon> {{option.prodPointCode}} : {{option.prodPointName}} </mat-option> </mat-autocomplete> </mat-form-field> </form> </mat-toolbar>
When I pull up chrome dev tools I attempted to adjust the height in the CSS for the component using div.mat-form-field and several other options, but nothing has seemed to work. Looking at the documentation at Angular Material, I haven't found anything that shows me how to control this simple styling adjustment. What am I missing. Is it so simple and I just overthinking it? Thanks!