web-dev-qa-db-fra.com

angular $ angulaire) 5 - champs de formulaire bloqués à 180px

J'ai créé une forme dans un dialogue en utilisant des formes matérielles mais je n'arrive pas à obtenir des entrées plus larges que 180px malgré les nombreux exemples suivants, notamment https://material.angular.io/components/input/example .

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

Quelqu'un at-il un exemple sérieux/non-trivial 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

cssangularangular-material2
31
Jonesie

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

Je vais déplacer mon style à l'échelle 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 sauvera quelqu'un d'autre le jour où j'ai perdu ...

Merci

16
Jonesie

pouvez-vous essayer d'utiliser

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

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

6
simi

C'est ce .mat-form-field.mat-form-field dans le CSS qui pose problème. Dès que j'ai supprimé cela, je pouvais contrôler les largeurs avec le paramètre .input-full-width width. J'ai mis en place 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;
} */
6
Alan Fitzgerald

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);
}
4
Pipo