help(MatInput): Appearence outline with prefix and suffix

[ropoko]

What are you trying to do?

I am trying to use the input with outline appearence, also with prefix and suffix text, but for some reason the input text does not align with the suffix and prefix

example:

What troubleshooting steps have you tried?

I tried inspecting html on browser and adding some custom css, but is doesn't work

Reproduction

Steps to reproduce:

1. In mat-form-field component (appearence - outline) add the
2. add the prefix and suffix:

   <p matPrefix>R$</p>
   <p matSuffix>,00</p>

3. My code:

   <mat-form-field appearance="outline">
   <input
     matInput
     formControlName="valorVoucher"
     class="input-voucher"
   />
   <p matPrefix>R$</p>
   <p matSuffix>,00</p>
   <mat-hint color="contrast">Valor mínimo RS500,00</mat-hint>
   </mat-form-field>

Environment

• Angular: 14.0
• CDK/Material: 14.0.4
• Browser(s): edge
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[wagnermaciel]

This appears to be fixed in our latest version https://stackblitz.com/edit/3mg52i?file=src%2Fapp%2Fform-field-prefix-suffix-example.html,src%2Fapp%2Fform-field-prefix-suffix-example.css

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}