J'essaie d'aligner ces éléments dans mon application angulaire - date, total du fichier et taille du fichier. S'il y a un plus grand nombre avec plus de chiffres, cela repousse les autres éléments. J'ai essayé de changer les marges de remplissage et j'ai essayé l'affichage: Flex, inline et inline-block. Je veux que le début de chaque élément s'aligne même si les nombres ont plus ou moins de chiffres, alors disons que nous avons - 1er avril 2019 1 fichier 3445 G le début de chaque élément s'alignera avec le 28 mars 2019 34 fichiers 29282 G .

Les éléments sont répartis sur plusieurs classes avec une date de date-d'élément de travail, un total de fichier d'élément de date de travail et une longueur de fichier d'élément de date de travail. Lorsque vous cliquez dessus, ils ouvrent des listes de données de travail. Voici une photo et mon code actuel -

Html -

      <div *ngFor="let date of selectedJob.dates" class="card-date-file">
        <div class="detail-item" (click)="toggle()">
          <span class="jobdate-item-date">{{ date.date | date: 'MMM dd, y' }}</span>
          <span class="jobdate-item-file-total">{{ date.files.length }} files</span>
          <span class="jobdate-item-file-length">{{ jobFileCalc(date.files) }} GB</span>
        </div>
        <ng-container *ngIf="show">
        <div *ngFor="let file of date.files" class="list" >
          <span class="file-item-filename">{{ file.filename }}</span>
          <span class="file-item-incr">{{ file.incr? 'INCR':'FULL' }}</span>
          <span class="file-item-time">{{ file.dttm | date:'h:mm' }}{{ file.dttm | date:'a' | lowercase }}</span>
          <span class="file-item-size">{{ file.sizegb.toFixed(1)| number : fractionSize }} GB</span>
        </div>
        </ng-container>
      </div>
    </div>

CSS -

.jobdate-item-date {
  padding: 0.1em 1.1em 0.3em 0.8em;
}

.jobdate-item-file-total {
  padding: 0.3em 1.1em 0.3em 1.1em;
}

.jobdate-item-file-length {
  padding: 0.3em 1.1em 0.3em 1.1em;
}
0
devcoder 8 nov. 2019 à 18:33

1 réponse

Meilleure réponse

Vous pouvez donner à chaque élément une certaine largeur (j'ai utilisé flexbox dans mon exemple), et s'il est trop long, vous pouvez tronquer le texte avec quelques ellipses si vous le souhaitez. Vous pouvez bien sûr jouer avec les largeurs ou utiliser des pourcentages pour obtenir les résultats souhaités.

.detail-item {
  display: flex;
  padding: 8px;
}

.jobdate-item-date,
.jobdate-item-file-total, 
.jobdate-item-file-length {
  flex: 0 0 100px;
  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class="detail-item" (click)="toggle()">
  <span class="jobdate-item-date">Mar 29, 2019</span>
  <span class="jobdate-item-file-total">12 files</span>
  <span class="jobdate-item-file-length">2280.2 GB</span>
</div>

<div class="detail-item" (click)="toggle()">
  <span class="jobdate-item-date">Apr 3, 2019</span>
  <span class="jobdate-item-file-total">2 files</span>
  <span class="jobdate-item-file-length">99.2 GB</span>
</div>

<div class="detail-item" (click)="toggle()">
  <span class="jobdate-item-date">Apr 3, 2019</span>
  <span class="jobdate-item-file-total">2 files</span>
  <span class="jobdate-item-file-length">324324234234234232423 GB</span>
</div>
2
elDrimm 8 nov. 2019 à 15:43