Hallo Sebastian,
du kannst in Visforms auswählen, welche UI-Framework verwendet werden soll, um das Formular zu rendern.
Abhängig vom gewählten UI-Framework, sieht dann das HTML unterschiedlich aus.
Die Idee hinter der Option, dass man ein UI-Framework auswählen kann ist, dass die meisten Templates mit großen UI-Frameworks wie Bootstrap oder UIkit erstellt werden.
Das Template liefert dann dass gesamte Look and Feel der Seite und Visforms passt sich da einfach ein.
Dieses bietet dann auch gutes responsives Verhalten, Mehrspaltigkeit, etc.
Neben Unterstützung für die beiden großen, oben benannten UI-Frameworks bietet Visforms auch noch die Option "None" an.
Diese ist für den Fall gedacht, dass man ein Template verwendet, dass nicht mit einem der beiden großen UI-Frameworks erstellt wurde.
Dass ist die Option, die du gewählt hast.
Dieses Layout 'muss alles selbst machen' und ist deshalb weniger flexibel (z.B. kennt es kein mehrspaltiges Layout).
In diesem Layout wird die Checkbox bei Darstellung "Als Liste" immer hinter dem Label gerendert.
Im Bootstrap 5 Layout dagegen steht die Checkbox vor dem Label (ist in der Bootstrap 5 Dokumentation so festgelegt).
Normalerweise, sitzen die Checkboxen im None-Layout aber ordentlich untereinander und das sieht eigentlich gut aus.
Du hast nun eine ganze Menge CSS geschrieben, um das None-Layout zu individualisieren.
Irgendetwas in deinem CSS führt nun dazu, dass die Checkboxen nicht mehr ordentlich untereinander stehen.
So eine richtig gute Lösung, wie du das Layout sinnvoll verändern kannst habe ich gerade nicht.
- Du kannst versuchen, ob du evtl. mit der CSS Flex Property zum Ziel kommst. Die Flexbox erlaubt es, die Reihenfolge der Elemente zu "ändern":
css-tricks.com/snippets/css/a-guide-to-f.../#flexbox-background
- Du kannst ein Override für die Datei components/com_visforms/layouts/visforms/default/multicheckbox/control.php erstellen. Das ist ganz konkret die Datei, die das Layout der Checkboxgruppe rendert. Im folgenden Code die Zeile, die das Label rendert unter die Zeile, die das Input rendert verschieben.
Code:
if ($asList) {
if ($j != 0) {
$html[] = '<br />';
}
$labelClass .= 'visCSSbot5 visCSSrllst ';
$html[] = '<label class="' . $labelClass . ' ' . $field->labelCSSclass . '" id="' . $field->name . 'lbl_' . $j . '" for="field' . $field->id . '_' . $j . '">' . $field->opts[$j]['label'] . '</label>';
$html[] = '<input id="field' . $field->id . '_' . $j . '" name="' . $field->name . '[]" value="' . $field->opts[$j]['value'] . '" ' . $checked . $disabled . $inputAttributes . '" data-error-container-id="fc-tbxfield' . $field->id . '" />';
}
Wie du ein updatesicheres Override erstellst, ist in der Dokumentation erläutert:
docs.joomla-4.visforms.vi-solutions.de/d...yout-with-overrides/
(bzw. das ist ja auch ein Joomla Standard Feature).
Nachteil dieser Herangehensweise ist, dass du aber trotzdem evtl. nach einem Visforms Update dein Override anpassen musst.
Wir geben beim Update immer eine Meldung aus, wenn wir Dateien, für die Overrides erstellt werden können, für das Update verändert haben.
- Du kannst versuchen, ob du mit dem Bootstrap 5 Layout und eigenem CSS insgesammt besser fährst.
Herzliche Grüße,
Aicha
I recommend you the new and up-to-date documentation for Joomla 4:
.