угловой материал 5 - поля формы застряли на 180 пикселей

Я создаю форму в диалоговом окне с использованием форм материала, но я не могу представить, чтобы входные данные были более широкими, чем 180 пикселей, несмотря на многочисленные примеры, включая 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;
}

Спасибо

Ответ 1

Ага! Кажется, что это связано с 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"
  });

Надеюсь, это спасет кого-то еще в тот день, когда я проиграю...

Спасибо

Ответ 2

Вы можете попробовать использовать

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

У меня была та же проблема с mat-card, у меня это работало.

Ответ 3

Это тот .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>

Ответ 4

Решение, которое я нашел, заключалось в этом общем style.css

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

Ответ 5

Как и говорила Джоунси, это поведение связано с View Encapsulation. В этом контексте .mat-form-field-infix принимает 180px в качестве значения по умолчанию , вероятно, из-за этого. Значение auto позволяет браузеру вычислять ширину, а не вводить жестко закодированное значение. Объявления !important вынуждают переопределить стиль для этого.
Я использую !important, поскольку он соответствует правилам использования этого свойства. см. документы

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