Angular Material form field Long label overlapping with input text

user_3229049 0
Viewed 766

Angular material form field label overlaps with entered text, Also multiple cosmetic issues? Long labels with fields have issue with responsiveness. Check stackblitz link: https://stackblitz.com/edit/angular-ar2ulq

Any Solution? Condition : Complete label should be visible, it should not get shrink.

angular-material angular
1 Answers

You can adjust the label white-space property:

  <mat-form-field class="field-label-ellipsis" appearance="outline" floatLabel="always">
    <mat-label>
      Legacy form field long Long long Long long Long long Long long Long lon
      Long long Long long Long long Long label
    </mat-label>
    <input matInput placeholder="Placeholder" />
    <mat-hint>Hint</mat-hint>
  </mat-form-field>

And the CSS:

.field-label-ellipsis mat-label {
  white-space: nowrap;
}

Working example on Stackblitz

user_39645480
Related