CODEWITHSUNDEEP
htmlcssangularangular-material
Dwayne
Dwayne

Reputation: 179

increase width and add placeholder to mat input(angular ~5)

I am using mat input(code is below): which looks/appears like this(below screenshot) - add a placholder which disappears once user starts typing.. Currently with my implementation , the text shifts upwards and floats(once the focus is on the input box) and the text keep appearing on the UI.

Can someone assist me in achieving what I want??

Upvotes: 0

Views: 981

Answers (4)

RBC
RBC

Reputation: 478

This link might be helpful for you

How to move placeholder to top on focus AND while typing?

Upvotes: 0

Ray
Ray

Reputation: 39

<mat-form-field>
 <mat-label>Find {{ this['groupType'] }} by Name</mat-label>
        <input type="text" matInput (keyup)="searchList($event.target.value)" style="padding: 3px 10px; font-size: 20px;"/>
      </mat-form-field>

Upvotes: 0

Jasdeep Singh
Jasdeep Singh

Reputation: 8301

Just remove the mat-label and add placeholder attribute in mat input.

<mat-form-field appearance="outline">
  <input type="text" matInput (keyup)="searchList($event.target.value)" placeholder="Find {{ this['groupType'] }} by Name" />
</mat-form-field>

Working stackblitz: https://stackblitz.com/edit/angular-fjhtdf

Upvotes: 0

Jack
Jack

Reputation: 1999

Use padding, you don't need to change the height of an input. To change the color of the placeholder, use ::placeholder. Increasing font-size will also increase the height of the input.

input {
  padding: 8px;
  font-size: 18px;
  border: 1px solid #efefef;
  border-radius: 3px;
}

input::placeholder {
  color: lightgray;
}
<input placeholder="Example Input" />

Upvotes: 1

Related Questions