Joomla 5 Notice

We are pleased to announce that as of January 29, 2024, all of our Joomla extensions are compatible with Joomla 5.

For all who are still updateing from Joomla 3 to Joomla 4: Joomla 4 Migration instructions are available here:

There is now a separate Documentation for Visforms for Joomla 4 and for Visforms for Joomla 5!

Forum

Visforms Subscription user can ask questions in our forum. Please log in with the relevant user first.
Everybody can access the forum for reading.

Please only ask 1 question per topic.

Important information for almost every question:
V1: Which Visforms version is running?
V2: Which Joomla version is running?
V3: Which PHP version is running?

Mehrspaltiges Formular am Smartphone

More
4 months 1 week ago #10567 by Administrator IV
Replied by Administrator IV on topic Mehrspaltiges Formular am Smartphone
Hallo Knobloch,

vielen Dank für den Export des Formulars.
Ich habe es mir angesehen und es verhält sich tatsächlich nicht korrekt, also nicht so wie in der Feld-Konfiguration eingestellt und dementsprechend zu erwarten ist.

Ich sehe das als einen klaren Bug in Visforms an und wir werden das Verhalten anpassen.
Ich habe dazu einen Issue zur Entwicklung in der Bug-Liste angelegt:
Issue [VF-1171] Forum: Boostrap 5: Control Group Width: Inconsitent and wrong CSS classes are set

Wenn wir den Bug-Fix releasen, wirst du explizit über das Release hier im Thema informiert.
Vielen Dank nochmal für deinen Hinweis!

In meiner nächsten Antwort beschreibe ich dir einen relativ einfachen Workaround mit den Visforms Frontend Webassets.
Mit diesem Workaround kannst du die gewünschte Einteilung erreichen und auch 'einstellen'.

Liebe Grüße, Ingmar

:idea: I recommend you the new and up-to-date documentation for Joomla 4:
docs.joomla-5.visforms.vi-solutions.de/en/docs/
Most of this also applies retrospectively to Joomla 3.
Please only ask 1 question per topic :-).

:idea: Ich empfehle Dir die neue und aktuelle Dokumentation für Joomla 4:
docs.joomla-5.visforms.vi-solutions.de/docs/
Das meiste gilt rückwirkend auch für Joomla 3.
Bitte immer nur 1 Frage pro Thema stellen :-).

More
4 months 1 week ago - 4 months 1 week ago #10568 by Administrator IV
Replied by Administrator IV on topic Mehrspaltiges Formular am Smartphone
Hallo Knobloch,

bis zum Release des oben erwähnten Bug-Fixes gibt es den folgenden Workaround.
Du kannst damit die Spaltenbreiten für ausgewählte Felder (hier die Feld-IDs) und Device-Größen (hier für 'Smartphone') nachträglich mit etwas JavaScript anpassen.
Damit erreichst du das gleiche wie in der Feld-Konfiguration bezüglich der verschiedenen Optionen 'Breite der Control-Gruppe XYZ'.

Das JavaScript:
Code:
// set responsive column size for mobile devices ('col-??') jQuery(document).ready(function() {     console.log('FEWA script loaded');     // array for the form field IDs     let IDs = [];     // Anzahl je Muster-kreisförmig (KR)     IDs = [586, 587, 588, 589, 590, 591];     setColClassValue(IDs, 4);     // Farbe zur ausgewählten Marke rund     IDs = [593, 594, 595, 596, 597, 598];     setColClassValue(IDs, 4);     // Anzahl je Muster - rechteckig (RE)     IDs = [601, 602, 603, 604, 605, 606];     setColClassValue(IDs, 4);     // Farbe zur ausgewählten Marke rechteckig     IDs = [608, 609, 610, 611, 612, 613];     setColClassValue(IDs, 4); }); function setColClassValue(IDs, width) {     jQuery.each(IDs, function(index, value){         jQuery(`div.field${value}`).removeClass('col-12').addClass(`col-${width}`);     }); }


Die Formular-Konfiguration, Reiter 'Frontend Webassets', Unter-Reiter 'Formular':
vi-solutions.de/forum-uploads/hundemarke...rm-configuration.jpg

Das Formular auf einem Smartphone:
vi-solutions.de/forum-uploads/hundemarken-form.jpg

Ich habe die Breite der Control-Gruppen nicht wie bei dir auf 1/12 gestellt.
Ich habe die Breite der Control-Gruppen auf 4/12 gestellt, weil ich meine und gesehen habe, dass 1/12 auf dem Smartphone definitiv viel zu schmal ist.
Du kannst die Breite der Control-Gruppen aber ändern (siehe unten).

Mir ging die Logik der Einstellungen, die ich vornehmen musste, durch die sehr kleinen Breiten total verloren.
Der Browser zeigt bei 1/12 nur ein kleines unscheinbares graues Kästchen ohne jeglichen Text an.

Der Code fasst die Felder zu 6er Gruppen zusammen, die ja alle die gleiche Breit haben sollen.
Du kannst aber für jede der 6er Gruppen, die Breite der Control-Gruppen im Code anpassen und ausprobieren, was dir am besten passt.

Du musst den JavaScript-Code an deine Feld-IDs anpassen:
Code:
... IDs = [608, 609, 610, 611, 612, 613]; setColClassValue(IDs, 4); ... function setColClassValue(IDs, width) {}


Zu: [608, 609, 610, 611, 612, 613]
Für diese IDs wird die Breite der Control-Gruppe 'Smartphone' in einem Rutsch gesetzt.

Zu: setColClassValue(IDs, 4);
Aus der 4 wird eine 4/12 Breite der Control-Gruppe 'Smartphone' (erscheint im HTML dann als CSS-Klasse 'col-4').

Aktuelles Fehlerverhalten (3 Fehler):
Die Feld-Einstellung 'Breite der Control-Gruppe Smartphone' ist nicht die Einstellung für das Smartphone (Fehler).
Die Feld-Einstellung 'Breite der Control-Gruppe Default' ist die Einstellung für das Smartphone (Fehler).
Die Feld-Einstellung 'Breite der Control-Gruppe Default' wird nicht übernommen (Fehler).

Liebe Grüße, Ingmar

:idea: I recommend you the new and up-to-date documentation for Joomla 4:
docs.joomla-5.visforms.vi-solutions.de/en/docs/
Most of this also applies retrospectively to Joomla 3.
Please only ask 1 question per topic :-).

:idea: Ich empfehle Dir die neue und aktuelle Dokumentation für Joomla 4:
docs.joomla-5.visforms.vi-solutions.de/docs/
Das meiste gilt rückwirkend auch für Joomla 3.
Bitte immer nur 1 Frage pro Thema stellen :-).
Last edit: 4 months 1 week ago by Administrator IV.

More
4 months 1 week ago #10571 by KnoSoft
Replied by KnoSoft on topic Mehrspaltiges Formular am Smartphone
Danke für die Antwort!
Ich habe, wie beschrieben das Script eingefügt(mit den angepassten ID's) und gespeichert-leider ohne Erfolg.
Ich habe sicher etwas übersehen....
 
Attachments:

More
4 months 1 week ago #10574 by Administrator IV
Replied by Administrator IV on topic Mehrspaltiges Formular am Smartphone
Hallo Knobloch,

danke für den Screenshot!

Im obigen JavaScript-Code ist ein ganz offensichtlicher Fehler (Zeile 4 im Code).
Es kommt zu einem Syntax-Fehler und die Ausführung wird abgebrochen.
Deswegen kannst du auch keine Auswirkung sehen.
Die falsche Code-Zeile ist auch im Screenshot zu sehen.

Das war mein Versehen ...
Es muss irgendwie beim Kopieren für den Beitrag entstanden sein.
Ich verstehe nicht wie es dazu kam, weil an dieser Stelle nichts zu ändern gewesen war.
Aber egal, mit der folgenden minimalen Änderung funktioniert es.

Und ja, ich finde die Einteilung mit 4/12 bei den 6er Gruppen optisch und auch für die Auswahl ebenfalls optimal.

Es muss lauten:
Code:
// array for the form field IDs let IDs = [];

Es darf nicht lauten (habe es im Beitrag mit dem Code bereits korrigiert):
Code:
// array for the form field IDs let IDs = ;

Ändere die Stelle im Code und es sollte dann auch bei dir funktionieren.

Liebe Grüße, Ingmar

:idea: I recommend you the new and up-to-date documentation for Joomla 4:
docs.joomla-5.visforms.vi-solutions.de/en/docs/
Most of this also applies retrospectively to Joomla 3.
Please only ask 1 question per topic :-).

:idea: Ich empfehle Dir die neue und aktuelle Dokumentation für Joomla 4:
docs.joomla-5.visforms.vi-solutions.de/docs/
Das meiste gilt rückwirkend auch für Joomla 3.
Bitte immer nur 1 Frage pro Thema stellen :-).

More
4 months 1 week ago #10575 by KnoSoft
Replied by KnoSoft on topic Mehrspaltiges Formular am Smartphone
DANKE!
Es läuft wie erwünscht!

More
4 months 1 week ago #10577 by Administrator IV
Replied by Administrator IV on topic Mehrspaltiges Formular am Smartphone
Hallo Knobloch,

das freut mich!

Liebe Grüße, Ingmar

:idea: I recommend you the new and up-to-date documentation for Joomla 4:
docs.joomla-5.visforms.vi-solutions.de/en/docs/
Most of this also applies retrospectively to Joomla 3.
Please only ask 1 question per topic :-).

:idea: Ich empfehle Dir die neue und aktuelle Dokumentation für Joomla 4:
docs.joomla-5.visforms.vi-solutions.de/docs/
Das meiste gilt rückwirkend auch für Joomla 3.
Bitte immer nur 1 Frage pro Thema stellen :-).

Moderators: Administrator AVAdministrator IV
Powered by Kunena Forum