web-dev-qa-db-fra.com

Séparation Angular Cartes matérielles verticalement

Je veux lister les éléments d'un tableau verticalement avec des cartes, mais il n'y a pas d'espace entre eux. J'ai essayé d'utiliser le rembourrage mais il semble que cela ne fonctionne pas.

image de la carte

Comment puis-je espacer ces cartes?

<ng-container *ngIf="titles?.length; else noTitle">
    <mat-card class="asd cardPardding" *ngFor="let title of titles">
      <p>
      {{title}}
      </p>
    </mat-card>
  </ng-container>

  <ng-template #noTitle>
    <mat-card class="asd cardPardding">
      <p>
      No title !
      </p>
  </mat-card>
  </ng-template>

C'est css

.asd {
  width: 80%;
  margin: 0 auto; /* Added */
}

.inputasd {
  width: 100%;
}

.cardPadding {
  padding: 100px;
  margin-bottom: 50px;
}
cssangularangular-materialngfor
8
Alperzkn

.component.html

<ng-container *ngIf="titles?.length; else noTitle">
    <mat-card class="my-class-name asd cardPardding" *ngFor="let title of titles">
        <p>
            {{title}}
        </p>
    </mat-card>
</ng-container>

<ng-template #noTitle>
    <mat-card class="asd cardPardding">
        <p>
            No title !
        </p>
    </mat-card>
</ng-template>

Fichier .css/.scss

.my-class-name{
    margin-bottom: 10px;
    ... 
}
5
Krishna Rathore

J'ai passé trop de temps à résoudre ce problème. Ensuite, j'ai pensé que je savais quelque chose de mal, mais mon erreur n'est qu'une seule lettre dans le nom de la classe. Vous allez bien, la marge fonctionne. J'ai mal tapé le nom de la classe. Merci pour la réponse.

0
Alperzkn