angular 5 material - 表单域停留在 180px [英] angular 5 material - form fields stuck at 180px

问题描述

我已经使用材质表单在对话框中创建了一个表单，但尽管遵循了包括 https://material.angular.io/components/input/example.

I've created a form in a dialog using material forms, but I can't seem to get the inputs to be wider than 180px despite following numerous examples including https://material.angular.io/components/input/example.

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

I'm sure this is a pretty standard CSS thing, but I don't have that sort of brain so I cant figure out the problem.

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

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

这是我的:

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

谢谢.

推荐答案

好像跟 View Encapsulation 有关.这个线程解释了它:https://github.com/angular/material2/issues/4034 但是更改组件的封装会导致各种编译失败.

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

这篇文章给了我正确的解决方案:https://material.angular.io/指南/自定义组件样式

This article gave me the correct solution: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...

这篇关于angular 5 material - 表单域停留在 180px的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！