CODEWITHSUNDEEP
cssangularangular-material
FiringBlanks
FiringBlanks

Reputation: 2084

mat-form-field placeholder text misaligned

My <mat-form-field> placeholder text ("Search for your school...") is too low near the bottom of the <input> box. How can I vertically raise it so there is more spacing below the text? It should appear in the middle of the <input> box like the magnifying glass. I'm using Angular Material 7.

enter image description here

HTML

 <mat-form-field style="width: 50vw; max-width: 450px; margin-top: -4px;" appearance="fill">
     <input matInput placeholder="Search for your school..." aria-label="School" [matAutocomplete]="auto" (input)="filterSchools()" #schoolInput [(ngModel)]="searchModel" (keyup.enter)="searchButton(searchModel)" name="inputField" id="searchInput" (keyup)="keyuppedSearch()">
     <mat-icon class="searchIcon" matSuffix style="color: #6336c6;" (click)="searchButton(schoolInput.value)">search</mat-icon>
 </mat-form-field>

Stackblitz: https://stackblitz.com/edit/angular-fbcxc8?file=app%2Fform-field-appearance-example.html

Solution

After inspecting the input element, I added padding to the bottom of the placeholder using:

::ng-deep .mat-form-field-flex .mat-form-field-infix .mat-input-element {
  padding-bottom: 8px;
}

enter image description here

Upvotes: 0

Views: 1054

Answers (1)

Hemanth Girimath
Hemanth Girimath

Reputation: 74

The angular material for mat form field is by default designed that way. You can override the styles using the chrome dev tools and by copying the css selector for the fields and make the text align at center using CSS

Upvotes: 1

Related Questions