为什么特定 mat-form-field 的高度不会改变？ （角度 6）

Question

目标：减小特定 mat-form-field 的高度（但仍将其保持在原位，在“请登录”的右侧）。 它应该在文本值和下拉箭头周围占用最少的空间。

目前看起来是这样的：

我希望它周围框上的线条更接近单词 English 和向下箭头。 该框是通过添加以下内容创建的：appearance="outline"

问题：我能够成功更改宽度，但不能更改高度。

我的尝试：

• 我浏览过 SO 文章，例如 How to change height in mat-form-field 和 Adjusting height of mat-form-field Angular Material

• 我已尝试自行调整高度（高度：40 像素）

• 我已尝试最小化填充以使其看起来更小 (padding-top: -1.84375em;)

• 我尝试在 Chrome Devtools 中更改它，但文本随后对齐 盒子底部

HTML：

<div class="title-container">
    <mat-card-title class="text-center" i18n="@@MoVeSeLo_H1_1">
        Please Sign In
    </mat-card-title>
    <form [formGroup]="_siteForm">
        <mat-form-field class="language-field" appearance="outline">
            <mat-select (selectionChange)="doSomething($event)" [value]="languages[i]">
                <mat-option *ngFor="let language of languages" [value]="language">
                    {{language.viewValue}}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </form>
</div>

CSS：

.title-container {
    position: relative;
    margin-top: 8px;
}

.language-field {
    position: absolute;
    right: 0;
    top: 0;
    margin-top: -16px;
    width: 115px;
    height:40px;
    padding-top: -1.84375em;    
}

Answer 1

兄弟，我找到你了，一些简单的解决方案是：

将此添加到您的 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;
}

解释

您可以在此处随意控制 mat-form-field 的高度。

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

通过这个波纹管，您可以控制您的 mat-form-field 占位符填充以匹配您放置的新高度。

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

让我知道你的作品

Answer 2

https://pxgeqykgapgy.angular.stackblitz.io/中的代码

HTML

<form class="example-container" [formGroup]="options" [style.fontSize.px]="getFontSize()">
    <mat-card-title class="text-center">
        Please Sign In
    </mat-card-title>
    <mat-form-field class="matselect" [color]="options.value.color">
        <mat-select formControlName="color">
            <mat-option value="primary">English</mat-option>
            <mat-option value="accent">Chinees</mat-option>
            <mat-option value="warn">Hindi</mat-option>
        </mat-select>
    </mat-form-field>

</form>

CSS

.example-container {
  display: flex;
}

.matselect{
    width: 115px !important;
    border: 1px solid;
    border-radius: 6px;
    position: absolute;
    right: 10px;
    top: 10px;
}

::ng-deep .matselect .mat-form-field-underline {
    display: none !important;
}