Question

我已经在使用材质表单的对话框中创建了一个表单但是我似乎无法获得比180px宽的输入，尽管有许多例子包括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;
}

由于

Answer 1

啊哈！看起来它与View Encapsulation有关。该线程解释了它：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"
  });

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

由于

Answer 2

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

＆＃13;

<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>

＆＃13;

.form-full-width {
    min-width: 150px;
    max-width: 500px;
    width:100%;
}

.input-full-width {
    width:800px;
}

/* .mat-form-field.mat-form-field {
    width: auto;
} */

＆＃13;

Answer 3

您可以尝试使用

mat-form-field {
width: 100%;
}

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

Answer 4

就像Jonesie所说的，此行为与View Encapsulation有关。在这种情况下，.mat-form-field-infix将180px作为默认值probably beacause of this。 auto值使浏览器可以计算宽度，而不必放置硬编码值。 !important声明对此强制样式。
我正在使用!important，因为它符合使用此属性的规则。 See docs

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

Answer 5

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

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

Answer 6

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

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

角度5材料 - 形状字段粘贴在180px

6 个答案: