CODEWITHSUNDEEP
angularangular-material
A. Patterson
A. Patterson

Reputation: 51

Angular Mat-Form-Field - always float label in border outline

Angular Material 11

I have an existing application to which I have been asked to make changes.

I have a component that provides a Material date input box. I want the label to appear in line with the border, like this (I don't want purple, just this placement). Alternatively, there could be no placeholder, and only a label that's permanently fixed to the border of the label.

Desired appearance

Instead, what I have is this:

Without value in cell

With value in cell

HTML in displayed component:

`

<div class="form-group dueDatePop">
   <app-duedate
    [parentForm]="myForm"
    [controlName]="'EndDate'"
    [placeholder]="'End Date'"
    tabindex="13"
   ></app-duedate>
</div>

` app-duedate html:

`

<ng-template #inputContent>
    <mat-label></mat-label>
    <mat-form-field appearance="outline">
      <input
        class="form-control"
        [placeholder]="placeholder"
        matInput
        [matDatepicker]="dp"
        [formControlName]="controlName"
        maxlength="10"
      />
      <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
      <mat-datepicker #dp></mat-datepicker>
    </mat-form-field>
</ng-template>

`

Having the empty and including a placeholder is turning the placeholder into a label, which is close to the correct behavior, but it's in the wrong place. I want it in line with, not above, the outline.

I was able to push the .mat-form-field-label into a new position using padding, but the border runs right through it. Setting a background-color looks worse, since the placeholder label is taking up the whole width of the top border.

`

::ng-deep .date-picker-form-field-as-placeholder .mat-form-field-label{
    padding-left: 0px;
    padding-top: 7.5px;
}

`

with data

without data

I also tried appearance="legacy", providing actual text in the mat-label

Upvotes: 2

Views: 5215

Answers (1)

noahK
noahK

Reputation: 41

You just have to add floatLabel="always" in your mat-form-field:

<mat-form-field appearance="outline" floatLabel="always">
</mat-form-field>

Upvotes: 4

Related Questions