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

7. Dezember 2023

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.

Youtube Embed Poster: DJ0t4YnEySg

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:

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

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:

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

Hinweis:

Die obigen Stile entsprechen dem klassischen Standardthema. Wenn Sie nach der Anwendung der benutzerdefinierten CSS-Codes ein Problem feststellen und zögern, zum Standard zu wechseln, wenden Sie sich bitte an uns, damit wir Ihnen helfen können.

Support kontaktieren:

Unser Kundensupport-Team ist rund um die Uhr erreichbar und die durchschnittliche Antwortzeit beträgt zwischen ein und zwei Stunden.
Sie können unser Team erreichen über:

Support Forum: https://www.jotform.com/answers/

Kontakt zum Jotform Support: https://www.jotform.com/contact/

Kommentar abschicken:

Jotform Avatar
Diese Seite ist durch reCAPTCHA geschützt und es gelten die Google Datenschutzbestimmungen und Nutzungsbedingungen.

Podo Comment Schreiben Sie den ersten Kommentar.