Horizontales Layout
Es gibt verschiedene Möglichkeiten, einem Formular ein Layout zu geben. Beispielsweise kann Weissraum zwischen den Sektionen hinzugefügt werden um die Elemente zu Gruppieren. Wenn für Formulare ein Layout festgelegt wird, kann dies zu ungewüschten Grössen der Formularfelder führen. Um dies zu umgehen, können Sie einem Feld den CSS-Selektor "full width" geben. Mit dieser Einstellung erstreckt sich das Formularfeld über die ganze Breite. Falls bestimmte Felder des Formulars nicht untereinander, sondern nebeneinander abgebildet werden sollten, können Sie die Felder mit Hilfe der Flexbox nebeneinander darstellen.
Formular-Elemente über die gesamte Breite ziehen
Sie können bestimmen, dass ein einzelnes Element die gesamte Breite des Formulares einnimmt.
Das Formular wirkt dadurch einfacher und aufgeräumter.
Empfohlen ist dies ausdrücklich für Textfelder in schlanken Formulare mit Widget-Darstellung (form-widget form-widget--narrow).
Hinweis: Bei sehr kurzen speziellen elementen kann dies zu Verwirrung führen, da z.B. ein kurzes Select-Feld (z.B. Geschlecht) dann wie ein Textfeld aussieht.
Bearbeiten Sie das gewünschte Feld in dem Webformular.
Klicken Sie auf "Erweitert" und dann "WRAPPING ATTRIBUTES".
Wählen Sie den CSS-Selektor "element--width-full".
Speichern Sie die Einstellungen.
Speichern Sie das Formular.
Flexbox Elemente hinzufügen
Nutzen Sie die Flexbox Elemente, um mehrere Felder nebeneinander zu platzieren.
Bearbeiten Sie das gewünschte Webformular.
Wählen Sie "+Add Layout" aus.
Dies generiert ein Flexbox Objekt. Geben Sie einen einmaligen Schlüssel ein. Wir empfehlen, etwas zu wählen, das mit dem entsprechenden Feld zusammenhängt (bspw. "titel").
Speichern Sie die Änderungen.
Mit dem Klick auf "+Add element" können Sie innerhalb des neuen Elements andere Elemente hinzufügen.
Wenn das Element hinzugefügt wurde, wird es eingerückt unter dem Flexbox-Element angezeigt, um zu zeigen, dass es sich im Inneren des Elements befindet.
Flexbox: Ausrichtung der Elemente
Die Elemente können nach links, rechts oder zentriert ausgerichtet werden.
Wählen Sie einer der Optionen von der Dropdown-Liste "Flexbox Settings" aus.
Flexbox: Grösse der Elemente
Beim Hinzufügen einer Flexbox wird eine neue Spalte mit dem Namen "Flex" mit Zahlen angezeigt. Die in der Spalte enthaltene Nummer entspricht der relativen Breite des Elements zu anderen Elementen.
Wenn in einem Flexbox-Element beispielsweise ein Element mit '3' und ein anderes mit '1' vorhanden ist, ist das erste dreimal breiter als das zweite.
Diese Einstellung kann beim Bearbeiten jedes Elements unter "FLEXBOX ITEM" festgelegt werden.
Flexbox: Verschieben eines vorhandenen Elements in ein Flexbox-Element
Vorhandene Elemente können mit Drag & Drop einfach verschoben werden.
Klicken Sie dazu auf den Griff und verschieben Sie diesen mit Drag & Drop und beachten Sie die Einrückung.
- Die Zeile der Flexbox (a) ist weniger eingerückt als die darin enthaltenen Spalten-Elemente (b).
- Das Element (c) ist nicht mehr Teil der Flexbox (a).