CODEWITHSUNDEEP
angularinputangular-material
Sergino
Sergino

Reputation: 10818

align matSuffix content with a text inside mat-form-field input

I have a mat-form-field with <span>💡</span> as a matSuffix

<mat-form-field appearance="outline">
  <input matInput
    placeholder="Details"
    name="details"
    required />
  <span matSuffix>💡</span>
</mat-form-field>

The problem that emigi does not align with a text

enter image description here

Any ideas how to fix?

Upvotes: 7

Views: 12141

Answers (3)

SudarP
SudarP

Reputation: 936

Just override mat-form-field-infix and mat-form-field-suffix class as below

.mat-form-field-infix {
   top: 0em !important;
}      
.mat-form-field-suffix {
   top: 0em !important;
}

Upvotes: 1

Biruk Misanaw
Biruk Misanaw

Reputation: 141

You can fix it by overriding the material class. i.e. :host /deep/ .mat-form-field-suffix { top: 0; }

Upvotes: 0

G. Tranter
G. Tranter

Reputation: 17918

Use a DIV and try adjusting the position of the icon to compensate for the discrepancy between the default font size 16px and the size of a standard mat-icon suffix 24px:

<div matSuffix style="position: relative; bottom: 8px;">💡</div>

Upvotes: 9

Related Questions