Angular 8: изменить высоту в поле формы Mat на Specifi c номер пикселя

Question

Как я могу изменить высоту в mat-form-field с помощью appearance="outline" на заданный c номер пикселя высоты, 40px (или любое необходимое число от команды UX в будущем). Мне нужно уменьшить поле mat-form.

Как это можно сделать? Какое уравнение или какой номер детали можно изменить, чтобы изменить на 40px? -1,1? .75, 133%, Ищете какое-нибудь функциональное или математическое уравнение, используя ответ ниже, или любой другой вариант, который может работать.

{ ссылка }

::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%;
}

Answer 1

Не совсем точно, откуда вы хотите вырезать, поэтому я дам вам несколько вариантов, и вы сможете решить, что и сколько вы хотите вырезать, чтобы получить правильный размер

Чтобы удалить поля сверху и снизу

::ng-deep mat-form-field.mat-form-field-appearance-outline .mat-form-field-wrapper {
    margin: 0;
}

Чтобы изменить размер шрифта

mat-form-field {
    font-size: 10px;
}

Чтобы удалить подсказку и ошибки (пробел внизу)

::ng-deep .mat-form-field-wrapper {
    padding-bottom: 0;
}
::ng-deep .mat-form-field-subscript-wrapper {
    display: none;
}

К измените отступы (по умолчанию 1em для верха и низа)

::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
    padding: .5em;
}

Примечание: если вы решите сделать последнее, вам также придется изменить top или margin-top .mat-form-field-label как это

::ng-deep .mat-form-field-appearance-outline .mat-form-field-label {
    top: ...;
    margin-top: ...;
}

Answer 2

Я получил тебя, братан, Некоторое простое разрешение:

добавь это на свой css

::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex {
height: 40px !important
}

::ng-deep .mat-form-field-infix {
padding-top: 1px !important;
}

объяснено

Здесь вы можете контролировать высоту поля формы мата, как хотите.

 ::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex {
    height: 40px !important
    }

И с помощью этого сильфона вы можете управлять заполнением заполнителя поля формы, чтобы соответствовать новой установленной вами высоте.

  ::ng-deep .mat-form-field-infix {
    padding-top: 1px !important;
    }

Я пробовал здесь и отлично работает

Answer 3

Вы можете проверить это здесь, в зависимости от вашего проекта (@ angular / material 8.2.3): node_modules\@angular\material\_theming.scss

Строка ~ 4540: @mixin _mat-form-field-outline- outline- :

// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,
// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some
// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters
// an unknown pseudo-class it will discard the entire rule set.
$mat-form-field-outline-dedupe: 0;

// Applies a floating label above the form field control itself.
@mixin _mat-form-field-outline-label-floating($font-scale, $infix-padding, $infix-margin-top) {
  transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-outline-dedupe)
  scale($font-scale);
  width: 100% / $font-scale + $mat-form-field-outline-dedupe;

  $mat-form-field-outline-dedupe: $mat-form-field-outline-dedupe + 0.00001 !global;
}

@mixin mat-form-field-outline-typography($config) {
  // The unit-less line-height from the font config.
  $line-height: mat-line-height($config, input);
  // The amount to scale the font for the floating label and subscript.
  $subscript-font-scale: 0.75;
  // The padding above and below the infix.
  $infix-padding: 1em;
  // The margin applied to the form-field-infix to reserve space for the floating label.
  $infix-margin-top: 1em * $line-height * $subscript-font-scale;
  // The space between the bottom of the .mat-form-field-flex area and the subscript wrapper.
  // Mocks show half of the text size, but this margin is applied to an element with the subscript
  // text font size, so we need to divide by the scale factor to make it half of the original text
  // size.
  $subscript-margin-top: 0.5em / $subscript-font-scale;
  // The padding applied to the form-field-wrapper to reserve space for the subscript, since it's
  // absolutely positioned. This is a combination of the subscript's margin and line-height, but we
  // need to multiply by the subscript font scale factor since the wrapper has a larger font size.
  $wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;
  // The amount we offset the label from the input text in the outline appearance.
  $outline-appearance-label-offset: -0.25em;

  .mat-form-field-appearance-outline {
    .mat-form-field-infix {
      padding: $infix-padding 0 $infix-padding 0;
    }

    .mat-form-field-label {
      top: $infix-margin-top + $infix-padding;
      margin-top: $outline-appearance-label-offset;
    }

    &.mat-form-field-can-float {
      &.mat-form-field-should-float .mat-form-field-label,
      .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
        @include _mat-form-field-outline-label-floating(
                $subscript-font-scale, $infix-padding + $outline-appearance-label-offset,
                $infix-margin-top);
      }

      // Server-side rendered matInput with a label attribute but label not shown
      // (used as a pure CSS stand-in for mat-form-field-should-float).
      .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
      .mat-form-field-label {
        @include _mat-form-field-outline-label-floating(
                $subscript-font-scale, $infix-padding + $outline-appearance-label-offset,
                $infix-margin-top);
      }
    }
  }
}

с плавающей надписью и Mat-Form-Field-Outline-типография

Answer 4

вы можете добавить panelClass tp вашего mat-form-field как показано ниже:

вашего компонента. html:

 <mat-form-field panelClass="example-class"></mat-form-field>

и стиль в глобальном css файле

styles.s css:

.example-class{

   height:40px
 }