CODEWITHSUNDEEP
angulartypescriptangular-material
user17497856
user17497856

Reputation:

how to align angular mat prefix to a label in a form field

As you can see on the screenshot guys , I have a prefix for an input but the problem is it is not aligned with the mat label ..is there a way we can modify the mat prefix that it will be align with the mat label ? Thanks for any help and ideas , appreciated.

it should be something like this

enter image description here

#html code

 <mat-form-field appearance="fill">
            <mat-label>Termination Payment ($)</mat-label>
            <input 
              name="terminationPayment" 
              matInput
              (keyup) = "computeBuyout()"
              mask="separator.0" 
              thousandSeparator=","
              [allowNegativeNumbers]="false"
              [(ngModel)]="dealDispositionFormFields.terminationPayment"
              >
              <span matPrefix *ngIf="dealDispositionFormFields.terminationPayment">$</span>
          </mat-form-field>

current issue - screenshot

Upvotes: 0

Views: 4157

Answers (1)

Blunderchips
Blunderchips

Reputation: 564

We are going to need to make few changes to the default label wrapper class: shift it left and make sure it is visible. As the label wrapper class is nested quite deeply we need to use mark our overwrite as ::ng-deep. This modifier will ensure that all sub-components will be effect (be careful with this for the same reason).

Firstly, shift the label left by the size of the icon. By default, mat-form-field-prefix (class used by icons) have a size of 12.953px. By shifting the form label left by this amount it should line up perfectly with the prefix icon.

Next make sure that shifted text would be visible. By default, mat-form-field-label-wrapper set overflow to hidden so we are going to have to change that. We can achieve this by setting the overflow to visible.

Put together, the class to overwrite the default styling looks like this:

::ng-deep .mat-form-field-label-wrapper {
  overflow: visible;
  margin-left: -12.953px;
}

Tested against the example documentation here. Final result should look like this:

final result

Upvotes: 1

Related Questions