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

Das Widget Konfigurierbare Liste ist standardmäßig für alle Bildschirmgrößen responsiv. Es ist so konfiguriert, dass die Elemente auf Desktop-Browsern automatisch nebeneinander und auf Mobilgeräten untereinander (vertikal) angezeigt werden. Die Einstellung für benutzerdefiniertes CSS steht weiterhin zur Verfügung, sodass Sie das Layout anpassen können. Sie können beispielsweise die Eingabeelemente auch auf dem Desktop vertikal anordnen oder die Anzahl der Spalten ändern.

Watch on youtube

How to Make Configurable List Widget Responsive to All Devices

Im folgen finden Sie eine Liste der Anpassungen, die Sie mit dem Widget „Configurable List“ (Konfigurierbare Liste) vornehmen können. Informieren Sie sich vor der Durchführung von Änderungen darüber, wie Sie CSS-Code in Ihr Formular einfügen können.

Vertikales Layout

Um das Layout deer Elemente von einem Spaltenformat in ein vertikales Format zu ändern, müssen Sie den folgenden benutzerdefinierten CSS-Code 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 enthalten eine Media-Query speziell für Desktops, um das Responsive Styling auf Mobilgeräten beizubehalten. Hier ist das Ergebnis:

Spaltenlayout

Sie können das Layout von flexiben auf feste Spalten umstellen – zum Biespiel auf zwei Spalten –, indem Sie den folgenden benutzerdefinierten CSS-Code verwenden.

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

Passen Sie die Breitenangabe von 50 % an, um ein Layout mit drei oder vier Spalten für die Elemente zu erstellen. Im folgenden finden Sie ein Beispiel für ein zweispaltiges Layout: