0

I'm using Angular Material's mat-form-field with appearance="outline" and a prefix icon (matPrefix). On initial render, when the input is empty, the label appears too close to the prefix icon, almost overlapping it. After entering a value (which floats the label) and then clearing it, the label returns to its original position but now with correct spacing.

Expected Behavior

The label should be correctly spaced from the prefix icon on first load, even when the input is empty.

Actual Behavior

  • First load: Label is misaligned and too close to the icon.

  • After entering and clearing a value: Label spacing is correct.

    <mat-form-field class="autocomplete-field" appearance="outline" subscriptSizing="dynamic">
  <mat-label>Technologies</mat-label>
  <input matInput [formControl]="searchControl" autocomplete="off" [matAutocomplete]="auto" />

  <button matPrefix mat-icon-button tabindex="-1">
    <mat-icon>search</mat-icon>
  </button>

  <mat-autocomplete #auto="matAutocomplete">
    <!-- options -->
  </mat-autocomplete>
</mat-form-field>

first load, the label position When Enter the value after the clear the data, the label position

Improve this question
Related questions
541
mat-form-field must contain a MatFormFieldControl
0
How to sort(asc order) data(from database) in auto-complete drop-down in angular with custom Pipe
1
(Angular Material) mat-error message not showing inside mat-form-field
Load 5 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.