각진 5개의 재료 - 180도에서 고착된 폼 필드

각진 5개의 재료 - 180도에서 고착된 폼 필드

재료 양식을 사용하여 대화 상자에 양식을 작성했지만 https://material.angular.io/components/input/example 을 포함한 수많은 예를 따르더라도 입력이 180도보다 넓지 않은 것 같습니다.

저는 이것이 꽤 표준적인 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;
}

감사해요.

사용해 볼 수 있습니까?

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

나는 같은 문제를 가지고 있었습니다.mat-card이것은 나에게 효과가 있었습니다.

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

내가 진 날 다른 사람을 구했으면 좋겠어요

Jonesie가 말했듯이, 이 동작은 View Encapsulation과 관련이 있습니다.이러한 맥락에서.mat-form-field-infix걸린다180px아마도 이것 때문에 기본값으로.autovalue는 브라우저가 하드코드된 값을 넣는 대신 폭을 계산하도록 합니다.!important선언은 이에 대한 스타일을 강제로 재정의합니다.
사용 중!important이 속성의 사용 규칙을 준수하기 때문입니다.문서 참조

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

문제를 일으키는 것은 CSS의 .mat-form-field.mat-form-field입니다.그것을 제거하자마자, 저는 .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;
} */

제가 찾은 해결책은 이것을 일반적인 것입니다.style.css

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

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

이것은 잘 될 것입니다.커스텀 CSS 없이 할 수 있을지 모르겠습니다.

저도 같은 문제가 있어서 수정했습니다.하지만 아직도 왜 이런 일이 일어나는지 모르겠어요...

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

언급URL : https://stackoverflow.com/questions/48376554/angular-5-material-form-fields-stuck-at-180px