Wie Sie das Layout des Widgets für konfigurierbare Listen ändern

Das Konfigurierbare Liste Widget ist standardmäßig auf allen Displaygrößen responsiv. Es ist so konfiguriert, dass die Elemente auf einem Desktop-Browser automatisch nebeneinander oder auf mobilen Geräten vertikal angezeigt werden. Die Einstellung Benutzerdefiniertes CSS ist immer noch vorhanden, und Sie können sie verwenden, um sein Layout zu ändern. So können Sie beispielsweise die Eingabeelemente auf einem Desktop vertikal anzeigen oder die Anzahl der Spalten anpassen.

Nachfolgend finden Sie eine Liste der Anpassungen, die Sie mit dem Configurable List Widget vornehmen können.

Vertikales Layout

Um das Layout der Elemente von einem Spaltenformat in ein vertikales zu ändern, müssten Sie die folgenden benutzerdefinierten CSS-Codes einfügen.

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

Die benutzerdefinierten CSS-Codes haben eine reine Desktop-Abfrage, um das responsive Styling auf mobilen Geräten beizubehalten. Hier ist das Ergebnis davon:

Spalten-Layout

Sie können das Layout von fließenden zu festen Spalten – zum Beispiel zwei Spalten – anpassen, indem Sie die folgenden benutzerdefinierten CSS-Codes verwenden.

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

Passen Sie die Breite von 50% an, um ein drei- oder vierspaltiges Layout der Elemente zu erstellen. Unten sehen Sie ein Beispiel für ein zweispaltiges Layout: