CODEWITHSUNDEEP
angularangular-material
J4N
J4N

Reputation: 20727

How to disable the angular material placeholder flying above the input

I've an Angular Material input. In most forms, when I click on it, I like the behavior(having the placeholder going above the input). But in some cases I need this place holder to just disappear.

Also, I need the control to not use some white space "above" the input.

1) Is it possible? How?

2) If not, what would you do to still use the style of the theme(text color, no border, size, ...) of the angular material theme ?

Not sure it helps, but here is an example where I don't want it(the search text): https://stackblitz.com/edit/angular-scgar8

Upvotes: 3

Views: 1585

Answers (1)

C.OG
C.OG

Reputation: 6529

The material field has a floatLabel property.

You can set this to never to get your desired result.

<mat-form-field floatLabel="never">
  <input matInput placeholder="search">
</mat-form-field>

Upvotes: 5

Related Questions