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>
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'">
<md-input-container [floatPlaceholder]="'never'">
this helped me to hide the floating placeholder
Edit: Since Angular Material 6
<mat-form-field floatPlaceholder="never">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With