角度5材质-表单字段停留在180px [英] angular 5 material - form fields stuck at 180px
问题描述
我已经使用材质表单在对话框中创建了一个表单,但是尽管遵循了包括 https://material.angular.io/components/input/example .
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.
我确定这是相当标准的CSS,但是我没有那种头脑,所以我无法弄清楚问题所在.
I sure this is a pretty standard css thing, but I dont 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/guide/customizing-component-styles
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...
这篇关于角度5材质-表单字段停留在180px的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!