matériau 5 angulaire - champs de formulaire collés à 180px

Question

Ive créer un formulaire dans une boîte de dialogue à l'aide de matériel de formes, mais je ne peut pas sembler obtenir les entrées plus larges que 180px, en dépit de nombreux exemples, y compris https://material.angular.io/components/input/example.

Je suis sûr que c'est un assez standard css chose, mais je n'ai pas ce genre de cerveau donc je ne peux pas comprendre le problème.

Quelqu'un aurait-il une grave / non-trivial exemple qui fonctionne??

Voici la mienne:

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

Merci

Answer 1

pouvez-vous essayer d'utiliser

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

J'ai eu le même problème dans mat-card , cela a fonctionné pour moi.

Answer 2

Aha! On dirait que c'est quelque chose à voir avec la Vue de l'Encapsulation. Ce fil, il explique: https://github.com/angular/material2/issues/4034 mais l'évolution de l'encapsulation du composant provoque toutes sortes de compiler des échecs. Cet article m'a donné la bonne solution:https://material.angular.io/guide/customizing-component-styles

Je vais passer mon style de portée mondiale...

.formFieldWidth480 .mat-form-field-infix {
   width: 480px;
}

et dans le composant qui ouvre la boîte de dialogue:

this.newDialog = this.dialog.open(NewDialogComponent,
  {
    width: '650px', height: '550px',
    data : newThing,
    panelClass : "formFieldWidth480"
  });

J'espère que cela sauve quelqu'un d'autre le jour où j'ai perdu...

Merci

Answer 3

Tout comme Jonesie dit, ce comportement est lié à la Vue de l'Encapsulation. Dans ce contexte, .mat-form-field-infix faut 180px comme valeur par défaut probablement à cause de cela. L' auto de la valeur permet le navigateur calcule la largeur au lieu de les ranger valeur codée en dur. L' !important des déclarations des forces de style de remplacement pour cela.
Je suis l'aide d' !important depuis qu'il est conforme aux règles pour l'utilisation de cette propriété. Voir les docs

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

Answer 4

C'est que .mat-forme-champ.mat-forme-champ dans le fichier css qui est à l'origine d'un problème. Dès que je l'ai enlevé, je pouvais contrôler les largeurs avec .entrée-pleine largeur de réglage de la largeur. J'ai configuré une démo ici: 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;
} */

Answer 5

La solution que j'ai trouvée était celle-ci en général style.css

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