如何更改 mat-form-field 中的高度 [英] How to change height in mat-form-field

问题描述

如何使用 appearance="outline" 在 mat-form-field 中更改高度?

我需要减少 mat-form-field.

解决方案

将这些添加到您的 原始堆栈闪电战

::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 { 变换: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 { 顶部:-1.5em;}::ng-deep .mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {变换:translateY(-1.1em) scale(.75);宽度:133.33333%；}

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

I need to reduce the mat-form-field.

My input example

解决方案

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

这篇关于如何更改 mat-form-field 中的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！