Angular 8:将 Mat-form-field 中的高度更改为特定像素数 [英] Angular 8: Change Height in Mat-form-field to Specific pixel number

问题描述

如何使用 appearance="outline" 将 mat-form-field 中的高度更改为特定的高度像素数，40px(或来自 UX 团队的任何要求的数字)在将来).我需要减少 mat-form-field.

How can I change height in mat-form-field with appearance="outline" to a specific height pixel number, 40px (or any required number from UX team in the future). I need to reduce the mat-form-field.

这是怎么做到的?公式是什么，或者哪个零件号可以修改为 40px?-1.1?.75 , 133%，使用下面的答案或任何其他可行的选项寻找某种函数或数学方程.

How can this be done? What is the equation, or which part number can be modified to change to 40px? -1.1? .75 , 133%, Looking for some kind of function or math equation using answer below, or any other option which may work.

https://stackoverflow.com/a/54762506/12425844

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

推荐答案

不确定你想从哪里剪下来，所以我会给你几个选项，你可以决定你想要剪什么和剪多少获得合适的尺寸

Not sure exactly from where you want to cut, so I'll give you a few options and you can decide what and how much you want to cut in order to get the right size

去除顶部和底部的边距

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

改变字体大小

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

删除提示和错误(底部有空格)

To remove the hint and errors (space in the bottom)

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

改变内边距(默认上下1em)

To change the padding (default is 1em for top and bottom)

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

注意:如果您选择做最后一个，您还必须更改 .mat-form-field 的 top 或 margin-top-label 像这样

Note: if you choose to do the last one you will also have to change the top or margin-top of the .mat-form-field-label like this

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

这篇关于Angular 8:将 Mat-form-field 中的高度更改为特定像素数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！