Limiter le nombre de pillbox en liste

Tips and tricks
1

Request description

Bonjour,
Je partage une solution custom pour limiter le nombre d’étiquettes pillbox affichées en ligne. Car pour les instances contenant beaucoup de données, nous obtenions des lignes beaucoup trop hautes qui perturbaient l’affichage.

image
image1584×1040 49.8 KB

image
image1433×511 19 KB

L’ajout de ce code dans la CSS du thème utilisé permet de limiter l’affichage à 2 éléments avec “…” dans le 3ème. Il y a certainement de meilleures façon de faire mais si ça peut dépanner :slight_smile:

.objlist .pillbox-completion > ul > li:nth-of-type(1n+4) {
	display: none;
}

.objlist .pillbox-completion > ul > li:nth-of-type(1n+3) {
	font-size: 0;
}

.objlist .pillbox-completion > ul > li:nth-of-type(1n+3):before {
	font-size: 0.8rem;
	content: "...";
}

Emmanuelle

2

C’est malin, il fallait y penser !

On doit aussi pouvoir mettre un

text-overflow: ellipsis;
max-width: 8rem;
overflow: hidden;

dans les libellés des box pour éviter qu’une clé fonctionnelle déborde trop.

3

Merci @Emmanuelle ! Ce sera le premier tips&tricks n’émanant pas de nous :clap: