Reputation: 151

Angular Material form field appearance padding size

<mat-form-field appearance="outline">

Is it possible to reduce the default padding size of the border?

In the developer tool I can find the class and able to reduce size.

Putting this class in my css would not change the size.

Not sure how to put class name in my css to change the padding.

Upvotes: 2

Answers (5)

Reputation: 51

Try adding this class from styles.css

div.mat-form-field-infix {
  padding: 0em 0 !important
}

Upvotes: 5

Reputation: 131

Rather get rid of placeholder for mat-label itself when it's not present by adding this to your root.css

.mat-form-field.mat-form-field-appearance-outline:not(.mat-form-field-has-label){
  .mat-form-field-infix {
    border-top: 0 !important;
  }
}

Upvotes: 0

Reputation: 2221

To reduce the field padding I had to override the appearance-outline and the infix classes like this :

::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
  padding: 0.7em 0 0.7em 0 !important;
  top: -0.25em;
}

Upvotes: 6

Reputation: 165

Try ng-deep in your component's scss

::ng-deep  .mat-form-field-infix {
  padding: 0em 0;
}

Upvotes: 4

Reputation: 103

You can try padding: 0em 0 !important

Upvotes: 0