web-dev-qa-db-ja.com

angular 5マテリアル-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;
}

ありがとう

cssangularangular-material2
31
Jonesie

あぁ！ 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"
  });

私が失った日、これが他の誰かを救うことを願っています...

ありがとう

16
Jonesie

使ってみてください

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

mat-cardでも同じ問題が発生しましたが、これでうまくいきました。

6
simi

問題を引き起こしているのは、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;
} */
6
Alan Fitzgerald

私が見つけた解決策は、 これ 一般的なstyle.cssへの

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