Cómo cambiar el diseño del widget de lista configurable

El widget de lista configurable es adaptable de forma predeterminada en todos los tamaños de pantalla. Está configurado para mostrar automáticamente los elementos uno al lado del otro en navegadores de escritorio o verticalmente en dispositivos móviles. Su configuración de CSS personalizado sigue estando disponible, y se puede usar para cambiar su diseño. Por ejemplo, es posible que desees mostrar los elementos de entrada de forma vertical en un escritorio o ajustar el número de columnas.

Watch on youtube

A continuación se muestra la lista de personalizaciones que puedes hacer con el widget de lista configurable. Antes de realizar cualquier cambio, verifica cómo inyectar código CSS en tu formulario.

Diseño Vertical

Para cambiar el diseño de los elementos de un formato de columna a uno vertical, necesitas inyectar los siguientes códigos CSS personalizados.

@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;
}
}

Los códigos CSS personalizados incluyen una consulta únicamente para escritorio para mantener su estilo adaptable en dispositivos móviles. Aquí tienes el resultado de eso:

Diseño en Columnas

Puedes ajustar el diseño de columnas fluidas a columnas fijas, por ejemplo, dos columnas usando los siguientes códigos CSS personalizados.

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

Ajusta el ancho al 50% para crear un diseño de Tres o Cuatro columnas de los elementos. A continuación, se muestra un ejemplo de un diseño de dos columnas: