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

问题描述

如何使用appearance="outline"将mat-form-field中的高度更改为特定的高度像素数40px(或将来的UX小组所需的任何数字).我需要减少垫形场.

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

要删除顶部和底部的边距

To remove the margins from top and bottom

::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-label的top或margin-top

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

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