CODEWITHSUNDEEP
cssangularangular-material2
pantonis
pantonis

Reputation: 6467

Increase height on angular material 2 moves placeholder

I am trying to increase the size of material 2 input control by setting the height property of the input from css

<input mdInput placeholder="Favorite food" class="search-grid-input">

.search-grid-input {
    height:30px!important;
}

and I get the following on the right part of the image below:

enter image description here

Upvotes: 0

Views: 903

Answers (1)

Malik Shahzad
Malik Shahzad

Reputation: 6959

Version 1: You should increase the size of font of input filed, that will cover the area automatically.

md-input-container {
  font-size: 25px;
}

Version 2: You should use text area.

Version 3: Specify placeholder space from top:

.mat-input-placeholder-wrapper {
  top: 10px;
}

Note: I have copied classes names while using beta.8 version.

Upvotes: 1

Related Questions