Bei Bootstrap-Indivduell: Warum max. Breite der control-group vorgegeben?

Hallo vi-Team,

mir ist gerade beim Einrichten einer neuen Seite folgendes aufgefallen:

Mit den Layout-Einstellungen "Bootstrap / Indivduell" wird für jedes Element mit der Klasse "control-group" eine max. Breite von 240px vorgegeben:



Das macht horizontale Layouts schwierig. Etwa wenn zwei Formularfelder nebeneinander eine Zeile ausfüllen sollen (siehe Screenshot).  Es gibt doch für die Breite der Felder bzw. Gruppen extra die Einstellungen mit den Bootstrap-Breakpoints. Die funktionieren auch, nur sind die Input-Elemente dann weiterhin auf die 240px beschränkt.

Habe ich hier etwas nicht verstanden oder eine Option übersehen? Bitte erklären.

Habe nicht getestet, wie es sich bei anderen Layout-Einstellungen verhält.


Joomla 5.3.0
Visforms Version 5.4.0, Subscription Version 5.4.0
PHP 8.3.19

Hallo ejbm,

vielen Dank für die Versions-Informationen und den Screenshot.

Zu: max-width: 240px;

Die CSS-Klasse 'control-group' zieht die genannte Formatierung nicht an.
Die CSS-Klasse 'control-group' kommt im genannten CSS-Selektor nicht vor.

Die genannte Formatierung kommt nicht von Visforms.
Die genannte Formatierung stammt von deinem verwendeten Template.

Bootstrap sieht vor, dass bestimmten Standard-Form Input-Elementen die CSS-Klasse 'form-control' vergeben wird.
Dieser Anforderung kommt Visforms nach und setzt die CSS-Klasse 'form-control' entsprechend.

Die Implementierung des Bootstrap CSS deines verwendeten Templates vergibt für diesen Selektor die genannte maximale Breite.

Für das das Joomla Template 'Casssiopeia' etwa ist die konkrete Implementierung des CSS  hingegen wie folgt:
In diesem Fall musst du das Template anpassen und eventuell individuelles CSS schreiben und damit das CSS des Templates korrigieren.

Du kannst das individuelle CSS für das Template selbstverständlich auch innerhalb Visforms schreiben.
Etwa für alle Stellen mit diesem einen Visforms-Formular mit den 'Visforms - Frontend Webassets'.
Frontend Webassets:
docs.joomla-5.visforms.vi-solutions.de/d...-frontend-webassets/
Oder etwa für alle Stellen mit Visforms wie folgt.
Layout mit CSS anpassen:
docs.joomla-5.visforms.vi-solutions.de/d...wache-css-selektoren

Hintergrund:

Es ist nicht sinnvoll, wenn Visforms sich mit eigenem CSS gegen die Vorgaben des Templates durchsetzt, indem es etwa ein
.form-control {width:100%}
erzwingt.

Visforms besondere Strategie der passiven Integration:
docs.joomla-5.visforms.vi-solutions.de/d...ruture/introduction/
Visforms verwendet schwache CSS Selektoren
docs.joomla-5.visforms.vi-solutions.de/d...wache-css-selektoren

Liebe Grüße, Ingmar

Ach, sorry. Durch die CSS-Komprimierung habe ich nicht erkannt, woher die CSS-Regel kommt.

Pardon!