0

I have angular8 project in which i have angular material. I am using mat-autocomplete for input autocomplete. Here is the code of my html 

<form class="example-form">
  <mat-form-field class="example-full-width dummy-input-field" floatLabel="never">
    <input matInput class="custom-input" placeholder="State"  [matAutocomplete]="auto" [formControl]="stateCtrl">
  </mat-form-field>
  <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
        <img class="example-option-img" aria-hidden [src]="state.flag" height="25">
        <span>{{state.name}}</span> |
        <small>Population: {{state.population}}</small>
      </mat-option>
    </mat-autocomplete>
</form>

Here is my complete Stackblitz Link to demonstrate my issue. There is a placeholder inside input that says 'State'. I want to position this placeholder in the vertical middle of input like normal input boxes of Html.

How can i change the position of angular material input placeholder's position ?

Fahad Subzwari
  • 2,109
  • 3
  • 24
  • 52

1 Answers1

0

Try This

stack blitz working Demo

fallow angular material initial steps and import the require dependencies

Hope this will helps

DeC
  • 2,226
  • 22
  • 42
  • i customize `material autocomplete` so can you edit in my given `stackblitz` link? because in your working example you are using `angular-material autocomplete` but i customized it to my needs. So please edit in my example. – Fahad Subzwari Nov 13 '19 at 11:31
  • In your example also when i am trying to give border to `input` of `anglar-material` autocomplete so it seems like my example. When i am giving border to material input inside `mat-autocomplete` so placeholder/label seems at inappropriate position. – Fahad Subzwari Nov 13 '19 at 11:36