web-dev-qa-db-fra.com

Angular flex-layout - fxLayoutGap provoque un espace gênant à la fin des lignes encapsulées

L'utilisation de fxLayoutGap et de l'habillage laisse une marge gênante à la fin de chaque ligne encapsulée.

Y'a t'il un moyen d'arranger cela?

https://stackblitz.com/edit/angular-fxlayoutgap-calc-mralnz?file=app%2Fapp.component.html

<div fxLayout="row wrap" fxLayoutGap="25px">
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Name">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Occupation">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Company">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Name">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Occupation">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Company">
  </mat-form-field>
</div>

J'utilise:

  • @ angulaire/noyau @ 6.0.0
  • @ angulaire/matériau @ 6.0.1
  • @ angular/flex-layout @ 6.0.0-beta.15
angularangular-materialangular-flex-layout
11
Gerardo Buenrostro González

Pour tous ceux qui recherchent la réponse à ce problème, vous devez ajouter une grille à fxLayoutGap. La documentation sur https://github.com/angular/flex-layout/wiki/fxLayoutGap-API indique:

Pour utiliser fxLayoutGap avec un système Gutter, ajoutez simplement la grille de suffixes à n'importe quelle valeur fxLayoutGap. Cela crée un système de gouttière en appliquant une marge à l'élément hôte et un remplissage inverse à chaque enfant. À part ce changement, il fonctionne exactement comme le mode par défaut. Il prend également en compte l'ordre flexible et les éléments cachés, et a les mêmes capacités réactives que le mode par défaut.

Veuillez noter que contrairement à la fonctionnalité d'écart standard, fxLayoutGap avec le mot-clé grid applique un remplissage à chaque élément enfant pour ajouter le Gutter, en plus de la marge sur l'élément Host.

Ce dernier point concerne la manière dont la grille des éléments enfants peut entrer en conflit avec fxLayoutGap sur l'élément parent, alors sachez que le parent peut remplacer la disposition enfant. L'ajout d'une division supplémentaire entre les deux résoudra ce problème.

4
Jessica Crees

Vous pouvez le pirater en ajoutant un composant factice à la fin qui n'est pas affiché mais qui est disposé par flex-layout de sorte que le "dernier" champ de formulaire reçoive également la marge supplémentaire, puis en ajustant les marges du conteneur parent pour compenser la marge de droite supplémentaire:

<div fxLayout="row wrap" fxLayoutGap="25px" style="margin-right:-25px;">
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Name">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Occupation">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Company">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Name">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Occupation">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Company">
  </mat-form-field>
  <span class="cdk-visually-hidden"></span>
</div>

Mais je pense que c'est quelque chose qui devrait être corrigé dans flex-layout.

4
G. Tranter

1) supprimez fxLayoutGap car il ajoute une marge de droite à l'élément enfant.

2) ajouter du style à l'élément enfant = marge: 0 25 px; au lieu.

2
unclepiak