如何删除底部垫子表单字段的空格

Question

我使用 Angular 7 和 Angular 材料，我想移除空间底部，如你所见。我尝试了很多方法但没有成功。

Answer 1

您可以将其添加到您的CSS中

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

注意： 当您删除空格时，您无法正确放置
<mat-hint>hint</mat-hint>
或
<mat-error>error</mat-error>
。错误和提示进入表单字段。

不使用

::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 {}

将您想要设置样式的组件包装在自定义类中。所以它不会影响任何其他

mat-form-field

组件。现在让我们用

my-form-field

类来包装它

<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

对于 2023 年阅读本文的任何人：Angular 15 现在向表单字段添加了一个新属性：subscriptSizing。

如果将

subscriptSizing="dynamic"

添加到

mat-form-field

，它将删除空格，直到实际需要显示错误或提示，然后才会展开。这会导致布局发生变化，但根据您的使用情况，这可能是比之前建议的手动添加边距（并且在版本 14 之前必需的）更好的选择。

有关参考，请参阅https://material.angular.io/components/form-field/api#SubscriptSizing

您还可以通过 MAT_FORM_FIELD_DEFAULT_OPTIONS 注入令牌将其全局指定为默认值；请参阅https://material.angular.io/components/form-field/api#MatFormFieldDefaultOptions

// in main.ts (Angular 15+)
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';

bootstrapApplication(AppComponent, {
  providers: [
    {
      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
      useValue: {
        subscriptSizing: 'dynamic'
      }
    }
  ],
});

Answer 3

尝试以下操作：

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

（您可以在这里关注关于这个额外底部空间的讨论：https://github.com/angular/components/issues/7975）

Answer 4

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

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

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

Answer 5

我的解决方案是使用一个额外的类。

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

或者简单地说：

html

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

css

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

Answer 7

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

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

此外，如果您需要仅应用于特殊字段，请定义一个类：

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

并将类名放入你的CSS中：

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

Answer 8

我可以通过在 style.scss 中使用以下 css 来删除 mat-form-filed 的底部空间

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

Answer 9

以下模板怎么样：

<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

。

Answer 10

.mat-mdc-form-field-subscript-wrapper {
    display: none;
}

Answer 11

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

你可以在css中添加重要内容

Answer 12

您可以将 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 13

不要使用 ::ng-deep
这很简单..将其添加到您的 css 文件中

mat-form-field{
    margin-bottom: -1.25em
}

Answer 14

我的解决方案：将自定义类添加到 mat-form-field 并定位 .mat-mdc-form-field-bottom-align 类以为其显示属性指定 none 值，这在我的情况下达到了目的。

::ng-deep .my-form-field .mat-mdc-form-field-bottom-align {
    display: none !important;
}
<mat-menu #menu="matMenu">
  <ng-container *ngIf="currentPage === 1">
    <mat-form-field class="my-form-field" style="padding:10px;">
      <input matInput>
    </mat-form-field>
  </ng-container>
</mat-menu>

Answer 15

在 Angular Material 15 中，您可以使用

subscriptSizing="dynamic"

。

<mat-form-field class="w-full" appearance="outline" subscriptSizing="dynamic">
          
</mat-form-filed>

Answer 16

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

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

@include mat-core($typography);

Answer 17

与

mat-fab

一起使用时，我也遇到了类似的问题。每当旋转器被“激活”时，周围的元素就会向下移动。问题在于

mat-spinnner

，它来自渲染后

.mat-fab .mat-button-wrapper

的嵌入包装

span

元素。

设置，

mat-spinner

解决了问题。不需要

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

，但可以将微调器与

vertical-align

按钮很好地对齐。

Answer 18

带角度 16 mat-fab

但是将其设置在文件夹根目录下的

style.css 中，而不是在组件的 css 中..

Answer 19

.mat-mdc-form-field-bottom-align::before { display: none !important; }

这样，您可以通过适当的 CSS 查询进行选择，轻松地从 mat-form-fields 中删除底部空间。

如何删除底部垫子表单字段的空格

问题描述投票：0回答：19

19个回答

最新问题

如何删除底部垫子表单字段的空格

问题描述 投票：0回答：19

19个回答

最新问题

问题描述投票：0回答：19