Définir la largeur sur les champs de formulaire mat d'entrée pour angular

Question

Je suis très nouveau sur Angular et j'essaie de créer un formulaire avec des champs de saisie plus longs que par défaut. Voici mon code actuel:

person.component.html

<form class="new-person-form">
    <mat-card>
        <mat-form-field>
            <input matInput placeholder="Name">
        </mat-form-field>
        <mat-form-field>
            <input matInput placeholder="Birthday">
        </mat-form-field>
        <mat-checkbox>Active</mat-checkbox>
    </mat-card>
</form>

person.component.css

.mat-form-field {
    padding: 10px;
}

.mat-checkbox {
    padding: 10px;
}

person.component.html

<form class="new-person-form">
    <mat-card fxLayout="row">
        <mat-form-field>
            <input matInput placeholder="Name" fxFlex="50">
        </mat-form-field>
        <mat-form-field>
            <input matInput placeholder="Birthday" fxFlex="25">
        </mat-form-field>
        <mat-checkbox fxFlex="25">Active</mat-checkbox>
    </mat-card>
</form>

person.component.css

.mat-form-field {
    padding: 10px;
}

.mat-checkbox {
    padding: 10px;
}

Et voici le résultat:

|                                                                          |
|   Name___________  Birthday_______  [] Active                            |
|                                                                          |

J'essaie d'allonger Name pour représenter environ 50% de la page, donc quelque chose comme ceci:

|                                                                          |
|   Name___________________________  Birthday_______  [] Active            |
|                                                                          |

Je ne suis pas super génial en CSS, donc je pense que FlexLayout pourrait être ce dont j'ai besoin, mais jusqu'à présent, je ne peux pas le faire fonctionner correctement.

Answer 1

En utilisant fxLayout, vous pouvez créer une boîte flexible. Pour créer chaque élément dans flexbox pour consommer la ligne complète, vous devez utiliser fxFlexFill. Pour créer un élément consommant l'espace restant, vous pouvez utiliser fxFlex.

Vous pouvez également utiliser fxLayoutGap au lieu du remplissage dans les styles. De plus, si vous souhaitez que les éléments passent à la ligne suivante lorsqu'il n'y a plus d'espace, vous pouvez utiliser fxLayout = "row wrap".

Voici quelques exemples de ce que vous cherchiez:

    <form class="new-person-form">
        <h3>full Rows:</h3>
        <mat-card fxLayout="row wrap">
            <mat-form-field fxFlexFill>
                <input matInput placeholder="Name" fxFlex="50">
        </mat-form-field>
        <mat-form-field fxFlexFill>
            <input matInput placeholder="Birthday" fxFlex="25">
        </mat-form-field>
        <mat-checkbox fxFlex="25">Active</mat-checkbox>
      </mat-card>
      <h3>50-25-25:(checkbox consumes same space as Birthday)</h3>
      <mat-card fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="15px">
          <mat-form-field fxFlex="50">
              <input matInput placeholder="Name">
          </mat-form-field>
          <mat-form-field fxFlex="25">
              <input matInput placeholder="Birthday">
          </mat-form-field>
          <mat-checkbox fxFlex="25">Active</mat-checkbox>
      </mat-card>
      <h3>50-remaining-required:(Birthday consumes remaining space)</h3>
      <mat-card fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="15px">
          <mat-form-field fxFlex="50">
              <input matInput placeholder="Name">
          </mat-form-field>
          <mat-form-field fxFlex>
              <input matInput placeholder="Birthday">
          </mat-form-field>
          <mat-checkbox>Active</mat-checkbox>
      </mat-card>
    </form>

J'ai également créé un exemple de travail dans le blitz de pile .