CODEWITHSUNDEEP
cssangularangular-material2
tone
tone

Reputation: 1434

Angular 4 Material 2 Remove placeholder superscript and error subscript space from input controls

I am currently attempting to use some components from angular material inside a material styled table. The issue I'm having is that even though I can floatPlaceholder="never" and shouldPlaceholderFloat="false", the space above the control is still taken up by the placeholder. The same goes for the error text that sits below the input line.

I want a consistent row height, and so do not want the placeholder space or error line space taken up. But I do want the behaviour where the underline highlights when the control is clicked (which you don't get if you take the control out of the form field.)

Angular Material placeholder and error space

How can I get rid of or hide this space?

Here's the code:

<form>

  <div style='background-color:lightblue'>

    <mat-form-field style='background-color:lightgreen' floatPlaceholder="never" shouldPlaceholderFloat="false">
      <mat-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="food">
        <mat-option *ngFor="let food of foods" [value]="food.value">
          {{food.viewValue}}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <p> Selected value: {{selectedValue}} </p>
  </div>
</form>

I have provided a plunker here.

Upvotes: 2

Views: 3667

Answers (1)

pouya zad
pouya zad

Reputation: 998

This worked for me (Material version 5)

in your component overwrite material classes to :

.mat-form-field-infix {
    border-top: 0 solid transparent !important;
}
.mat-form-field-wrapper {
    padding-bottom: 0 !important;
}
.mat-form-field-underline {
    bottom: 0 !important;
}

and you may want to add floatLabel="never" to your mat-form-field element to disable your place holder from hovering above your input as well.

Upvotes: 1

Related Questions