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

Question

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??

score 1 · Accepted Answer · answered Apr 06 '20 at 17:39

1

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" />

answered Apr 06 '20 at 17:39

Jack

1,893
1
11
28

I am using angular/angular-material ~5 . Does it have something to do with the version. Reason I am saying this is most of the answers doesn't quite seem to work . I still see the floating text on the `top-left` corner – Dwayne Apr 06 '20 at 18:59
@Dwayne, never used Angular so I can't say for sure. If you inspect the element is there padding all around it? – Jack Apr 06 '20 at 23:08

score 0 · Answer 2 · answered Apr 06 '20 at 17:45

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

score 0 · Answer 3 · edited Apr 06 '20 at 18:04

0

<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>

edited Apr 06 '20 at 18:04

Heretic Monkey

11,687
7
53
122

answered Apr 06 '20 at 17:50

Ray

37
5

score 0 · Answer 4 · answered Apr 06 '20 at 18:10

0

This link might be helpful for you

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

answered Apr 06 '20 at 18:10

RBC

478
1
3
12

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

4 Answers4