如何删除 space 底部垫表单字段

Question

我将 angular 7 与 angular material 一起使用，我想删除 space 底部，如您所见。我试了很多方法都没有成功。

Answer 1

您可以将此添加到 css

::ng-deep .mat-form-field-wrapper{
   margin-bottom: -1.25em;
}

NOTE: As you remove the space you cannot put <mat-hint>hint</mat-hint> or <mat-error>error</mat-error> properly. Error and hint get inside the form-field.

不使用 ::ng-deep( 对于 Angular 8 )

关闭更改填充的组件的封装。

您可以通过

import {Component,ViewEncapsulation} from '@angular/core';
@Component({
  selector: 'example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  encapsulation : ViewEncapsulation.None,
})
export class ExampleComponent {}

将要设置样式的组件包装在自定义 class 中。所以它不会影响任何其他 mat-form-field 组件。让我们暂时用 my-form-field class 包装它

<mat-form-field class="my-form-field">
  <input matInput placeholder="Input">
</mat-form-field>

.my-form-field .mat-form-field-wrapper {
      margin-bottom: -1.25em;
}

您可以在全局样式表中添加这些 css 而无需关闭视图封装。不过比较优雅的方法还是上面那个

Answer 2

尝试以下操作：

<mat-form-field style="margin-bottom: -1.25em">

（您可以在此处关注有关此额外底部的讨论 space：https://github.com/angular/components/issues/7975）

Answer 3

我可以通过在 style.scss

中使用以下 css 来删除 mat-form-filed 的底部 space

.mat-form-field-wrapper{
    padding-bottom: 10px;
}

Answer 4

.mat-form-field-infix{
    display: block;
    position: relative;
    flex: auto;
    padding: 0;
    border-top: 0px solid transparent !important;
}

您可以在css

中添加重要

Answer 5

我的解决方案是使用额外的 class。

HTML:

<mat-form-field class="no-padding">
    <input type="number" matInput placeholder="Speed" [ngModel]="speed"
           (ngModelChange)="onSpeedChange('speed', $event)"/>
  </mat-form-field>

SCSS:

.no-padding {
  .mat-form-field-wrapper {
    padding-bottom: 0 !important;
  }
}

不幸的是，!important 关键字是必需的，否则它只会引入默认值。

Answer 6

您可以将 height:4em 添加到 mat-form-field 中：

    <mat-form-field
        class="height-4em"
        appearance="outline"
        >
        <mat-label>Favorite food</mat-label>
        <input matInput placeholder="Ex. Pizza" value="Sushi">
    </mat-form-field>

Answer 7

在 angular 9 中，我只能通过将以下内容添加到 component.scss 中来消除间隙（其他答案对我来说不起作用）：

:host ::ng-deep .mat-form-field-wrapper{
  margin: 0 !important;
  padding: 0;
}

此外，我正在使用 appearance="outline"，对于其他外观，可能需要更改其他 css 类和属性，因为它可能有其他元素.

Answer 8

通过更改 material 主题的字体大小，您将获得更小的输入

$typography: mat-typography-config(
  $input: mat-typography-level(14px, 1.125, 400),
);

@include mat-core($typography);

Answer 9

我用 Angular 10 测试，这个有效：

:host ::ng-deep .mat-form-field-wrapper{
  margin: 0 !important;
  padding: 0;
}

此外，如果您只需要在特殊领域申请，请定义 class:

    <mat-form-field appearance="outline" class="no-wrapper">
      <input matInput>
    </mat-form-field>

并在你的 css 中输入 class 姓名：

    :host ::ng-deep .no-wrapper .mat-form-field-wrapper{
      margin: 0 !important;
      padding: 0;
     }

Answer 10

或简单地：

html

<mat-form-field class="no-bottom">
...
</mat-form-field>

css

.no-bottom {
  margin-bottom: -1.25em !important;
}

Answer 11

我在 mat-fab 按钮与 mat-spinnner 一起使用时遇到了类似的问题。每当微调器被“激活”时，周围的元素就会向下移动。问题出在 .mat-fab .mat-button-wrapper 上，它来自渲染后 mat-spinner 的嵌入式包装 span 元素。

设置，

::ng-deep .mat-fab .mat-button-wrapper {
  padding: 0;
  vertical-align: middle;
}

解决了问题。 vertical-align 不是必需的，但可以很好地对齐微调器 w/in 和 mat-fab 按钮。

Answer 12

以下模板怎么样：

<mat-form-field appearance="standard" class="compact-input">
  <mat-label>Test</mat-label>
  <input matInput>
</mat-form-field>

和以下 SCSS：

.compact-input {
  .mat-form-field-flex {
    padding-top: 0;
  }

  .mat-form-field-wrapper {
    padding-bottom: 0;
  }

  .mat-form-field-underline {
    bottom: 0;
  }
}

尽管只测试了 standard 外观。

不要忘记将 encapsulation: ViewEncapsulation.None 添加到您的组件中。如果将 SCSS 放在全局样式中，则可能需要添加一些 !important。

如何删除 space 底部垫表单字段

How to remove space bottom mat-form-field

angular-material

angular7