Mat-input Placeholder position

Question

I'm using mat-input to build a form but the input placeholder is not in the right position. How could I set placeholder position?

This is my html:

<mat-form-field [hideRequiredMarker]="formTclimit.value.hideRequired" [floatLabel]="formTclimit.value.floatLabel" style="width:97%">
<div class="inputborder" [ngClass]="{'inputerror':formTclimit.controls['codename'].invalid && formTclimit.controls['codename'].touched}">
<img class="search" />
<input style="display: inline-block;" type="text" matInput formControlName="codename" placeholder="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{'placeholder.search'|translate}}" (click)="searchStation()" [matAutocomplete]="tclstation">
<img class="required" />
</div>
</mat-form-field>

I use floatLabel value never.

Any idea?

Thanks in advance!

UPDATED:

I tried too, the option suggested by @JuNe but I got a similar problem:

My html is:

<mat-form-field class="inputborder" [ngClass]="{'inputerror':formTclimit.controls['codename'].invalid && formTclimit.controls['codename'].touched}" [hideRequiredMarker]="formTclimit.value.hideRequired" [floatLabel]="formTclimit.value.floatLabel" style="width:97%;vertical-align: top!important">
 <mat-label class="matlabel"> 
     <img class="search" /> 
     <span>{{'placeholder.search'|translate}}</span> 
</mat-label> 
<input style="display: inline-block; width:80%!important; padding:5px" type="text" matInput formControlName="codename" (click)="searchStation()" [matAutocomplete]="tclstation"> <img class="required" /> <button class="float-right button-esc" style="margin-top:5px!important" (click)="formTclimit.controls['codename'].value=''"><img class="remove"/></button> 

The problem is similar, matlabel added red border but I don't know what is below the mat-label or how move mat-label to the top.

Any idea?

Thanks!

Answer 1

You can use the mat-label tag instead the placeholder attribute of input. Then you should be able to style your placeholder text.

<mat-form-field>
  <mat-label class="some">Placeholdertext</mat-label>
  <input matInput type="text"/>
</mat-form-field>