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

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

你可以尝试使用

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

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

Answer 3

正如琼斯所说，这种行为与视图封装有关。在这种情况下，可能因为 this.mat-form-field-infix将其180px作为默认值。该值让浏览器计算宽度而不是放置硬编码值。该声明将强制样式覆盖这一点。 我正在使用，因为它符合使用此属性的规则。查看文档auto!important
!important

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

Answer 4

这就是导致问题的css中的.mat-form-field.mat-form-field.一旦我删除它,我就可以使用.input-full-width 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;
} */

Answer 5

The solution I found was this one into general style.css

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