Angular Material form field Long label overlapping with input text

Question

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.

WHAT YOU WANT? if text of label is big then textbox width should be increase? — Parth M. Dave
– Parth M. Dave, Commented Oct 13, 2023 at 12:51

Rabii Kahlaoui · Accepted Answer · 2022-03-28 21:13:32Z

1

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

answered Mar 28, 2022 at 21:13

Rabii Kahlaoui

1256 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nik Over a year ago

Label should be visible for better user experience

Rakesh · Accepted Answer · 2023-10-13 11:24:54Z

0

This might help

 textarea {
   padding-top: 20px;
}

answered Oct 13, 2023 at 11:24

Rakesh

4663 silver badges12 bronze badges

Collectives™ on Stack Overflow

Angular Material form field Long label overlapping with input text

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related