Disable float for mdInput text field

user_3026206 0
Viewed 15506

In an Angular 4 (Material) app, I have a text field for search. When I type in the field, a second field appears showing the entered text. This new field floats as I scroll the page. How do I disable the floating behavior?

It doesn't seem to be default behavior for a text field. I've tried md-no-float, but that's for the placeholder text I understand. Someone suggested setting an empty value, so I added that, but the problem remains.

<md-input-container md-no-float style="width: 100%">
      <input mdInput formControlName="search" value="" placeholder="Search Terms" />
</md-input-container>
angular-material2 angular-material angular
5 Answers

As per version 6.4.5 of @angular/material2 you can control floating labels using floatLabel input property as you can see in their floating label documentation.

<mat-form-field [floatLabel]="'never'">
user_55832830 
<md-input-container [floatPlaceholder]="'never'">

this helped me to hide the floating placeholder

Edit: Since Angular Material 6

<mat-form-field floatPlaceholder="never">
user_12981540

Just remove placeholder attribute

<input matInput placeholder="Input">

to

<input matInput >
user_22480880
user_114681790

It turns out it's the Chrome autocomplete popping up.

If you add autocomplete="off" to both the form and the input field, it will go away.

user_30262060
Related