angular 5 材质 - 表单字段停留在 180px

Posted 2023-03-06

【中文标题】angular 5 材质 - 表单字段停留在 180px

【英文标题】：angular 5 material - form fields stuck at 180px

【发布时间】：2018-06-30 18:53:53

【问题描述】：

我已经使用材质表单在对话框中创建了一个表单，但我似乎无法让输入宽于 180 像素，尽管遵循了包括 https://material.angular.io/components/input/example 在内的众多示例。

我确信这是一个非常标准的 CSS 东西，但我没有那种头脑，所以我无法弄清楚问题所在。

有没有人有一个有效的严肃/不平凡的例子？？

这是我的：

<h1 mat-dialog-title>title</h1>
<mat-dialog-content>
  <form novalidate #f="ngForm" class="form-full-width">
    <mat-form-field class="input-full-width">
      <input type="text" [(ngModel)]="data.name" name="name" matInput placeholder="Name">
      <mat-hint>Enter a unique name.</mat-hint>
    </mat-form-field>
    <mat-form-field class="input-full-width">
      <textarea [(ngModel)]="data.description" name="description" matInput placeholder="Description"></textarea>
      <mat-hint>You should describe the purpose/use of this thing.</mat-hint>
    </mat-form-field>
  </form>
</mat-dialog-content>

CSS：

.form-full-width 
    min-width: 150px;
    max-width: 500px;
    width:100%;


.input-full-width 
    width:800px;


.mat-form-field.mat-form-field 
    width: auto;

谢谢。

【参考方案1】：

你可以尝试使用

mat-form-field 
width: 100%;

我在mat-card 中遇到了同样的问题，这对我有用。

【讨论】：

这很好用。我把它放在组件的SCSS中

这对我有用 "@angular/core": "^8.2.14" 和 "@angular/material": "^8.2.3"

应该是元素名还是类名？我玩过它，他们都选择了元素。 ?

另外，如果您不想定义宽度（例如，如果您使用 flex-grow），您也可以定义“min-width: 0”或任何适合您需要的值。

【参考方案2】：

似乎与视图封装有关。该线程对此进行了解释：https://github.com/angular/material2/issues/4034 但是更改组件的封装会导致各种编译失败。

这篇文章给了我正确的解决方案：https://material.angular.io/guide/customizing-component-styles

我会将我的风格转移到全局范围...

.formFieldWidth480 .mat-form-field-infix 
   width: 480px;

在打开对话框的组件中：

this.newDialog = this.dialog.open(NewDialogComponent,
  
    width: '650px', height: '550px',
    data : newThing,
    panelClass : "formFieldWidth480"
  );

我希望这能在我失去的那一天拯救别人......

【讨论】：

这么大的事！！！！！！谢谢，但对我来说仍然是一种解决方法......为什么 180px ：$

【参考方案3】：

正如Jonesie 所说，这种行为与视图封装有关。在此上下文中，.mat-form-field-infix 将 180px 作为默认值 probably beacause of this。 auto 值让浏览器计算宽度而不是硬编码值。 !important 声明强制对此进行样式覆盖。 我正在使用!important，因为它符合使用此属性的规则。 See docs

::ng-deep .mat-form-field-infix 
    width: auto !important;

【讨论】：

只有代码的答案几乎总是可以通过添加一些解释来改进。使用 !important 的 CSS 答案类似于使用 sudo 的答案；他们应该解释为什么答案需要这样做，以及使用它的风险是什么。

Ng Deep 现已弃用。

【参考方案4】：

这是导致问题的 css 中的 .mat-form-field.mat-form-field 。删除它后，我可以使用 .input-full-width 宽度设置来控制宽度。我在这里设置了一个演示：StackBlitz.com

<h1 mat-dialog-title>title</h1>
<mat-dialog-content>
  <form novalidate #f="ngForm" class="form-full-width">
    <mat-form-field class="input-full-width">
      <input type="text" [(ngModel)]="data.name" name="name" matInput placeholder="Name">
      <mat-hint>Enter a unique name.</mat-hint>
    </mat-form-field>
    <mat-form-field class="input-full-width">
      <textarea [(ngModel)]="data.description" name="description" matInput placeholder="Description"></textarea>
      <mat-hint>You should describe the purpose/use of this thing.</mat-hint>
    </mat-form-field>
  </form>
</mat-dialog-content>

.form-full-width 
    min-width: 150px;
    max-width: 500px;
    width:100%;


.input-full-width 
    width:800px;


/* .mat-form-field.mat-form-field 
    width: auto;
 */

【讨论】：

谢谢。在阅读了@angular/material 的错误帖子后，我才添加了对 mat-form-field 的覆盖。这是一个很长的镜头。我仍然有同样的问题。看起来 180px 的固定宽度来自 mat-form-field-infix 但即使设置内联样式似乎也不会覆盖它。也许是因为这是在一个对话框中......

【参考方案5】：

我找到的解决方案是把this one改成一般的style.css

mat-form-field 
  margin-left: 2.5rem;
  width: calc(100% - 2.5rem);

【参考方案6】：

::ng-deep .mat-form-field-infix 
  width:800px !important;

这应该可以正常工作。不确定是否可以在没有自定义 CSS 的情况下完成。

【讨论】：

NG deep 已弃用。