CSS angular 5 material - 表单域停留在 180px

angular 5 material - form fields stuck at 180px

提问by Jonesie

Ive create a form in a dialog using material forms but I cant seem to get the inputs to be wider than 180px despite following numerous examples including https://material.angular.io/components/input/example.

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

I sure this is a pretty standard css thing, but I dont have that sort of brain so I cant figure out the problem.

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

Does anyone have a serious / non-trivial example that works??

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

Here's mine:

这是我的：

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

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

Thanks

谢谢

采纳答案by Jonesie

Seems like it's something to do with View Encapsulation. This thread explains it: https://github.com/angular/material2/issues/4034but changing encapsulation for the component causes all sorts of compile failures.

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

This article gave me the correct solution:https://material.angular.io/guide/customizing-component-styles

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

I'll move my style to global scope...

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

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

and in the component that opens the dialog:

并在打开对话框的组件中：

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

I hope this saves someone else the day I lost...

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

回答by Simileoluwa Aluko

can you try using

你能试试用吗

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

I had the same issue in a mat-card, this worked for me.

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

回答by Ricardo Sanchez

Just like Jonesie said, this behavior is related to View Encapsulation. In this context .mat-form-field-infixtakes 180pxas default value probably beacause of this. The autovalue lets the browser calculates the width instead of puting hardcoded value. The !importantdeclarations forces the style override for this.
I am using !importantsince it complies with the rules for the use of this property. See docs

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

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

回答by Alan Fitzgerald

It's that .mat-form-field.mat-form-field in the css that's causing an issue. As soon as I removed that, I could control the widths with .input-full-width width setting. I set up a demo here: StackBlitz.com

正是 .mat-form-field.mat-form-field 在 css 中导致了问题。一旦我删除了它，我就可以使用 .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;
} */

回答by Pipo

The solution I found was this oneinto general style.css

我找到的解决方案是这一成普通style.css

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