如何更改 mat-form-field 中的高度答案

【问题标题】：How to change height in mat-form-field如何更改 mat-form-field 中的高度
【发布时间】：2019-07-12 14:38:20
【问题描述】：

如何使用appearance="outline" 更改mat-form-field 的高度？

我需要减少 mat-form-field。

My input example

【问题讨论】：

在 css 中：input.mat-input-element {height:105px} - 这是你的意思吗？
这就是我的意思，但我想减少控制，它只是减少内部元素而不是 mat-form-field。
您能否提供一张您想要实现的目标的图片
添加图片...
这里有另一个相关问题，stackoverflow.com/questions/59977079/…

标签： css angular typescript angular-material mat-input

【解决方案1】：

将这些添加到您的original stackblitz 中的 CSS 中

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

已更新：带有标签的过渡...

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

【讨论】：

我将此添加到我的代码中，它改变了占位符的行为。
这是故意的，由于我的回答中的第三个 CSS 语句，删除或玩弄第三个 CSS 语句中的值以查看效果
@StackOverflow：我还添加了过渡效果，您可以使用这些值来获得您想要的确切效果
感谢 stackblitz 代码。这有助于删除额外的填充。如何确保 mat-form-field 的高度类似于 36px？
为了将指定样式限定为当前组件及其所有后代，请务必在 ::ng-deep 之前包含 :host 选择器 :) 感谢@akber 它的工作就像一个魅力 :)

【解决方案2】：

使用 @AkberIqbal 的解决方案搞乱了我的 mat-form-fields 样式，而 outline 不是。此解决方案也不需要任何!important;。有了!important;，你已经迷路了：D。

因此，这是一种添加全局样式的安全方法：（似乎有点矫枉过正，但我宁愿保存而不是抱歉）

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

如您所见。我“寻找”每一堂课，直到找到大纲！ 我喜欢只将轮廓样式应用于轮廓字段。

【讨论】：

你知道答案吗？ stackoverflow.com/questions/59977079/…
我不知道“公式”是什么。我从最佳答案中复制了值。您可以阅读 github 源代码以找到线索。

【解决方案3】：

这是我最近针对一个 32 像素高并允许圆角的字段的解决方案。

  & .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;
          }
        }
      }
    }
  }

【讨论】：

材质库中的大小是基于 em(rem) 的。最好不要混搭。
混搭什么？当您总是想要相同的大小时，请使用 px。当你想要它相对时使用 (r)em。

【解决方案4】：

如果有人想让 Akber Iqbal 的答案基于类（同时提供两种尺寸）：

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

希望 Angular 团队在未来的版本中增加对高密度 UI 的支持（高密度是 material design specifications 的一部分）。

【讨论】：

【解决方案5】：

TLDR：调整周围容器的字体大小。

更长： 调整表单字段大小的功能内置在 Angular Material 中，因此除非您想更改字段中的相对比例，否则您无需为调整单个组件的大小而感到困惑 (see documentation)。

调整字段大小的关键实际上只是调整周围容器中的字体大小。一旦你这样做了，其他一切都会随之扩展。例如

使用容器字体大小：12px;

<div style="font-size: 12px">
  
  <mat-form-field appearance="outline">
    <mat-label>Your name</mat-label>
    <input matInput placeholder="Jane Doe">
  </mat-form-field>

  <mat-form-field appearance="outline">
    <mat-label>Your email</mat-label>
    <input matInput placeholder="you@youremail.com">
  </mat-form-field>

</div>

结果形式：

使用容器字体大小：18px;

<div style="font-size: 18px">
  
  <mat-form-field...

</div>

结果形式：

注意

如果您对表单内的填充比例不满意，这不是您的解决方案。但是，这与您如何简单地调整表单大小是不同的问题。调整大小很简单，更改填充和边距比更麻烦！

【讨论】：

这个问题不是关于字体大小的调整。它是关于从文本/标签到边界的距离的关系，这是为了一些口味。
Andre 问题是如何更改表单字段的高度，这回答了：表单所有元素的高度都是相对于字体大小定义的，因此您只需要更改.你是对的，它不会改变相对比例 - 它会保持一切比例并缩放所有内容。但改变比例不是问题。您的问题与 OP 不同。
请评估标记的答案（它改变了比例，OP 对此很满意并将其标记为 anwser）。并仔细查看 OP 的图像。图像显示比例应该改变。周末愉快。
由于某种原因，当我查看问题时原始图像没有加载，因此只有文本可见。有了这些图像，很明显您的解释是正确的。
这是最好的答案！像魅力一样工作。谢谢！

【解决方案6】：

这是我用的：

.small-input.mat-form-field-appearance-outline .mat-form-field-infix {
    padding: .25em 0 .75em 0;
    font-size: 14px;
}
.small-input.mat-form-field-appearance-outline .mat-form-field-infix .mat-select-arrow{margin-top: 10px;}
.small-input.mat-form-field-appearance-outline .mat-select-empty + .mat-form-field-label-wrapper .mat-form-field-label{margin-top: -0.75em;}

【讨论】：

我尝试了这段代码，它适用于输入字段，但不适用于标签（在我的 mat-autocomplete 输入中）。从 small-input 重命名为 compact-input 我最终使用此选择器将标签定位在空对象上：.compact-input.mat-form-field-appearance-outline .mat-form-field-infix .mat-form-field-label-wrapper .mat-form-field-label.mat-empty.mat-form-field-empty { margin-top: -0.75em; }

【解决方案7】：

这是另一种方法：

/* Angular Material Overrides */
.mat-form-field-appearance-outline .mat-form-field-outline {
  color: #ccc; /* Override outline color. */
}

.mat-form-field-appearance-outline .mat-form-field-infix {
  padding: .65em 0; /* Original top/bottom value was 1em. */
}


.mat-input-element {
  position: relative;
  top:  -1.2em; /* Adjust accordingly to keep placeholder/input text vertically centered. */
}

.mat-form-field-label-wrapper {
  top: -1.2em; /* Adjust accordingly to keep <mat-label> text vertically centered. */
}

【讨论】：

【解决方案8】：

TL;DR Material 表单字段基于字段的font-size 属性。

不要在 CSS/SCSS 中调整材质高度、划桨等... 输入和选择等材质表单元素基于 font-size。此外，不建议使用内联样式，因此您可以简单地添加一些 CSS。 `appearance 属性无关紧要。

::ng-deep .mat-form-field {
    font-size: 12px; // example
}

【讨论】：

12 像素？那只是不好的做法..在移动设备上不会那么可读：P

【解决方案9】：

这里提到了无法隐藏浮动标签的“问题”：https://github.com/angular/components/issues/11845

提到的一个很好的解决方法是在您的 mat-form-field 中不包含 mat-label 并将其添加到您的 css 中，无论是本地的还是全局的。您可能需要使用 ::ng-deep。

.mat-form-field:not(.mat-form-field-has-label) .mat-form-field-infix {
  border-top-width: 0;
}

【讨论】：

【解决方案10】：

正如许多帖子的人所解释的那样，Material angular form-field 是基于字体大小的，所以对于所有想要定义自定义表单域的人来说，这里是我的代码来调整高度和宽度而不影响输入字体或图标切换大小。

在组件 css 中定义此代码并将它们作为一个类应用到 mat-form-field 标签。

.custom-form-field {
  width: 200px;
  font-size: 10px;
  margin-top: 3px;
  margin-bottom: -1.25em;

  mat-datepicker-toggle {
      font-size: 12px;
  }

  input.mat-input-element {
      padding-bottom: 2px;
      font-size: 12px;
      color: $title-color;
  }
}

【讨论】：

【解决方案11】：

您可以对轮廓样式的填充值进行深度覆盖：

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

对我来说这是一个很好的解决方案

【讨论】：

【解决方案12】：

将更改应用到选择器.mat-form-field .mat-form-field-infix。在 Sass 中会是：

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

【讨论】：

【解决方案13】：

如果你没有在“mat-select”中使用“mat-label”，那么下面的 css 将起作用

::ng-deep {
    .mat-form-field-infix {
        border: 0px !important;
    }
    .mat-form-field-appearance-outline .mat-select-arrow-wrapper {
        transform: none !important;
    }
}

之前：

之后：

【讨论】：