Comment changer la disposition du widget Liste configurable

Le widget Liste configurable s’adapte automatiquement à toutes les tailles d’écran : il est préconfiguré pour afficher les éléments côte à côte sur les navigateurs de bureau et verticalement sur les appareils mobiles. Son paramètre CSS personnalisé reste accessible et vous permet de modifier sa disposition. Par exemple, vous pouvez afficher les champs de saisie verticalement sur un ordinateur ou ajuster le nombre de colonnes.

Watch on youtube

How to Make Configurable List Widget Responsive to All Devices

Vous trouverez ci-dessous la liste des personnalisations possibles pour le widget Liste configurable. Avant toute modification, découvrez comment injecter du code CSS dans les widgets.

Disposition verticale

Pour modifier la disposition des éléments d’un format en colonnes à un format vertical, vous devez injecter le code CSS personnalisé suivant :

@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 comportent une requête réservée aux ordinateurs de bureau afin de conserver leur style réactif sur les appareils mobiles. Voici le résultat obtenu :

Disposition des colonnes

Vous pouvez ajuster la disposition de colonnes fluides à colonnes fixes, par exemple deux colonnes, en utilisant le code CSS personnalisé suivant :

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

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