How to change height in mat-form-field

问题

How can I change height in mat-form-field with appearance="outline"?

I need to reduce the mat-form-field.

My input example

回答1:

Add these to your CSS in the your original stackblitz

::ng-deep .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0px !important;}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-label { margin-top:-15px; }
::ng-deep label.ng-star-inserted { transform: translateY(-0.59375em) scale(.75) !important; }

UPDATED: with transition for the label...

::ng-deep .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0px !important;}
::ng-deep .mat-form-field-label-wrapper { top: -1.5em; }

::ng-deep .mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    transform: translateY(-1.1em) scale(.75);
    width: 133.33333%;
}

回答2:

Using @AkberIqbal's solution messed up my styling for mat-form-fields that where not outline. Also this solution does not need any !important;. With !important; you're already lost :D.

So here is a safe way to add to your global styles: (seems overkill, but I rather be save than sorry)

mat-form-field.mat-form-field.mat-form-field-appearance-outline > div.mat-form-field-wrapper > div.mat-form-field-flex > div.mat-form-field-infix  { padding: 0.4em 0px }
mat-form-field.mat-form-field.mat-form-field-appearance-outline > div.mat-form-field-wrapper > div.mat-form-field-flex > div.mat-form-field-infix > span.mat-form-field-label-wrapper { top: -1.5em; }

.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    transform: translateY(-1.1em) scale(.75);
    width: 133.33333%;
}

So as you can see. I "hunt" down every class until I have found a outline! I like outline styling to only be applied to outline-fields.

回答3:

Here is a recent solution of mine for a field that is 32px tall and allows for rounded corners.

  & .mat-form-field-wrapper {
    height: 44.85px;

    & .mat-form-field-flex {
      height: 32px;

      & .mat-form-field-outline {
        $borderRadius: 25px;
        height: 28px;

        & .mat-form-field-outline-start {
          border-radius: $borderRadius 0 0 $borderRadius;
          width: 13px !important; // Override Material in-line style
        }

        & .mat-form-field-outline-end {
          border-radius: 0 $borderRadius $borderRadius 0;
        }
      }

      & .mat-form-field-infix {
        left: 4px;
        padding: 0;
        top: -7px;

        & .mat-form-field-label,
        & .mat-input-element {
          font-size: 12px;
        }

        & .mat-form-field-label-wrapper {
          top: -1.04375em;

          & .mat-form-field-label {
            height: 16px;
          }
        }
      }
    }
  }

回答4:

In case someone wants to make Akber Iqbal's answer class-based(to have both sizes available):

:host ::ng-deep {
  .my-custom-component-small { // add my-custom-component-small class to your mat-form-field element
    .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0 !important;}
    .mat-form-field-label-wrapper { top: -1.5em; }

    &.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
      transform: translateY(-1.1em) scale(.75);
      width: 133.33333%;
    }
  }
}

Hopefully, the Angular team adds support for high-density UI in future releases(high-density is part of material design specifications).

来源：https://stackoverflow.com/questions/54760371/how-to-change-height-in-mat-form-field

标签

css

angular

typescript

angular-material

mat-input