Comment changer la disposition du widget de liste configurable

Le widget Liste configurable est réactif par défaut sur toutes les tailles d’affichage. Il est configuré pour afficher automatiquement les éléments côte à côte sur les navigateurs de bureau ou verticalement sur les appareils mobiles. Le paramètre de CSS personnalisé est toujours disponible, et vous pouvez l’utiliser pour modifier sa disposition. Par exemple, vous pouvez choisir d’afficher les éléments de saisie verticalement sur un ordinateur de bureau ou ajuster le nombre de colonnes.

Watch on youtube

Vous trouverez ci-dessous la liste des personnalisations que vous pouvez effectuer avec le widget de liste configurable. Avant de procéder à tout changement, vérifiez comment injecter le code CSS dans votre formulaire.

Disposition verticale

Pour changer la disposition des éléments d’un format en colonnes à un format vertical, vous devez injecter les codes CSS personnalisés suivants.

@media (min-width: 600px) {
#listContainer .configurable-list-field-label {
min-width: calc(150px - 8px);
}
.configurable-list-field-row {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
align-items: flex-start !important;
}
.configurable-list-field-wrapper {
flex-direction: row !important;
}
#listContainer 
div.configurable-list-field-row-wrapper:not(:first-child) 
span.configurable-list-field-label {
display: unset !important;
}
}

Les codes CSS personnalisés disposent d’une requête dédiée aux ordinateurs de bureau pour conserver son style réactif sur les appareils mobiles. Voici le résultat :

Disposition en colonnes

Vous pouvez ajuster la disposition de fluide à colonnes fixes — par exemple, deux colonnes en utilisant les codes CSS personnalisés suivants.

@media (min-width: 600px) {
.configurable-list-field-wrapper {
min-width: calc(50% - 8px);
}
}

Ajustez la largeur de 50 % pour créer une disposition en trois ou quatre colonnes des éléments. Voici un exemple de disposition en deux colonnes :