CODEWITHSUNDEEP
angularangular-material
nik
nik

Reputation: 210

Angular Material form field Long label overlapping with input text

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.

Upvotes: 1

Views: 4517

Answers (2)

Rakesh
Rakesh

Reputation: 466

This might help

 textarea {
   padding-top: 20px;
}

Upvotes: 0

Rabii Kahlaoui
Rabii Kahlaoui

Reputation: 125

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

Upvotes: 1

Related Questions