vi-solutions
Software + Internet

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?

Fehler in Bootstrap-Implementierung? row > row

More
7 months 2 weeks ago #10290 by ejbm
Fehler in Bootstrap-Implementierung? row > row was created by ejbm
Hi,

wenn ich das UI-Kit auf "Bootstrap 5" (Sublayout "individuell") stelle, bekomme ich folgendes HTML als ouput:

<fieldset class="fieldset-1 active row">
    <div class="row">
        <div class="col-12  field20">
            ....

Ein Element mit der row-Klasse folgt direkt auf ein weiteres Element mit row-Klasse. Das zerschießt die Struktur, weil dann die CSS-Regel ".row > *" mehrfach angewendet wird. Fällt besonders auf kleineres Bildschirmen auf.

Mache ich hier etwas falsch, habe ich etwas übersehen? Oder stimmt es einfach so nicht?
 

More
7 months 2 weeks ago #10300 by Administrator IV
Replied by Administrator IV on topic Fehler in Bootstrap-Implementierung? row > row
Hallo ejbm,

Es gibt in der Bootstrap Dokumentation keine Stelle, an der gesagt wird, dass eine CSS-Klasse 'row' nicht direkt ein Kind mit CSS-Klasse 'row' haben darf.
Andererseits erscheint diese Situation in den Code-Beispielen für Bootstrap 5 auch nicht.

Meines Erachtens hat die CSS-Klasse 'row' vor allem den Sinn, einen Flex-Context zu erzeugen.

Bei Verwendung des Cassiopeia Templates hat das row > row keinen Einfluss.
Hier sieht nichts verschossen auf, auch nicht auf den kleinen Bildschirmen.

Wenn du da etwas komisches siehst, hat es sicher wohl auch damit zu tun, wie das CSS für das 'row>*' bei dir konkret implementiert wurde.
Bislang hat niemand sonst eine vergleichbare negative Auswirkung beschrieben.

Wir könnten nochmal genauer in das Thema rein schauen.
Aber es wäre ziemlich undankbar, schon allein wegen der fehlenden klaren Aussagen in der Bootstrap Dokumentation.

Und wenn wir das jetzt umstellen würden, dann betrifft das alle anderen Installationen von Visforms gleichermaßen.
Und absehbar haben dann auf einmal ganz viele, nämlich alle bei denen es jetzt gut aussieht, in der Folge damit ein Problem.

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
7 months 2 weeks ago #10303 by ejbm
Replied by ejbm on topic Fehler in Bootstrap-Implementierung? row > row
Hallo Ingmar!

Danke für die rasche Antwort.

Jetzt war ich neugierig und habe es mal in reinem Bootstrap probiert, um das Template als Fehlerquelle auszuschließen – ergibt das gleiche Problem (Minimalbiespiel unten). Das gleiche in Cassiopeia (siehe Screenshot, auf den Abstand rechts achten).

Soweit ich es verstehe, ist der Grund, dass die row-Klasse mit negativen margins arbeitet.

 

---
<body>
<div class="container">
<div class="row">
<div class="row">
<div class="col-md-12 bg-primary">
<p>Paragraph</p>
</div>
</div>
</div>
</div>
</body>
  • Bildschirmfotovom2024-04-0521-34-36_edit.png

    • More
    7 months 1 week ago #10314 by Administrator AV
    Replied by Administrator AV on topic Fehler in Bootstrap-Implementierung? row > row
    Hallo ejbm,

    danke für die Illustration.
    Ja, das row > row macht den effektiven Platz, den die Label, Controls etc einnehmen können auf der rechten Seite etwas kleiner.
    Dieser kleine Unterschied ist offensichtlich noch nie irgend jemand aufgefallen.
    Zumindest nicht so, dass es als ein Fehler angesehen und gepostet wurde.

    Da der rechte Rand ja ohnehin nicht immer überall fluchtet ist der Effekt ohne Hintergrundfarbe eher schwer zu erkennen.
    Aufgrund deiner ursprünglichen Beschreibung hatte ich irgendwie einen sehr viel deutlicher sichtbaren Effekt erwartet :-).
    Deshalb die Vermutung, es würde am CSS deines Templates liegen.

    Da ich in der Bootstrap Dokumentation keinen Aussage dazu gefunden habe, ob row > row nicht erlaubt ist,
    weiß ich auch wirklich nicht, ob das ein Fehler ist.
    Hast du hierzu etwas in der Bootstrap Dokumenation gelesen?

    Herzliche Grüße,
    Aicha
    :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
    7 months 1 week ago - 7 months 1 week ago #10316 by ejbm
    Replied by ejbm on topic Fehler in Bootstrap-Implementierung? row > row
    Hallo Aicha,

    danke für die Rückmeldung.

    Es gibt in der Bootstrap-Doku den Satz

    Content should be placed within columns, and only columns may be immediate children of rows.

    Das bezieht sich auf Bootstrap 3.4 – scheint aber noch zu gelten. Quelle: getbootstrap.com/docs/3.4/css/

    In der Doku für 5.3 findet sich

    Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins to ensure the content in your columns is visually aligned down the left side.

    Quelle: getbootstrap.com/docs/5.3/layout/grid/

    Unten noch ein Beispiel von einer Website, in der das Problem ziemlich deutlich wird. Wäre klasse, wenn ihr das fixen könntet.

     
  • ScreenShot2024-04-08at13.27.16.png
    • Last edit: 7 months 1 week ago by ejbm.

    More
    7 months 1 week ago - 7 months 1 week ago #10333 by Administrator AV
    Replied by Administrator AV on topic Fehler in Bootstrap-Implementierung? row > row
    Hallo ejbm,

    vielen Dank für deinen tolle Input!

    Ich habe dazu einen Bugfix-Issue angelegt:
    Issue [VF-1079] Forum: Bootstrap 5 Layout: Prevent row > row
    Wenn wir den Bug-Fix releasen, wirst du explizit über das Release hier im Thema informiert.

    Die Änderung ist bereits implementiert und in allen nächsten Release (4.4.3, 5.0.2 und 5.1.0) enthalten.

    Im Prinzip kannst du die Änderungen in deiner Installation manuell einfügen.

    Geändert wurden 4 Dateien.

    In Visforms 4.4.3 sieht die Änderung gegenüber 4.4.2 so aus.
    components/com_visforms/tmpl/visforms/default_bt5.php Zeile 33
    Alt:
    Code:
    echo '<fieldset class="fieldset-' . $f . $active . ' row">';
    Neu:
    Code:
    echo '<fieldset class="fieldset-' . $f . $active . '">';
    Entfernt wurde als das 'row' vor dem ">';

    Und analog in
    components/com_visforms/tmpl/edit/edit_bt5.php
    plugins/content/vfformview/tmpl/default_bt5.php Zeile 32
    modules/mod_visforms/tmpl/default_bt5.php Zeile 42

    In Visforms 5.0.2 sieht sie gegenüber 5.0.1 so aus

    components/com_visforms/tmpl/visforms/default_bt5.php Zeile 33

    Alt:
    Code:
    echo '<fieldset class="fieldset-' . $f . $active . $this->visforms->mpforcusclass . ' row">';
    Neu:
    Code:
    echo '<fieldset class="fieldset-' . $f . $active . $this->visforms->mpforcusclass . '">';

    Und analog in
    components/com_visforms/tmpl/edit/edit_bt5.php Zeile 34
    plugins/content/vfformview/tmpl/default_bt5.php Zeile 32

    In
    modules/mod_visforms/tmpl/default_bt5.php Zeile 42
    Alt:
    Code:
    echo '<fieldset class="fieldset-' . $f . $active . $visforms->mpforcusclass . ' row">';
    Neu:
    Code:
    echo '<fieldset class="fieldset-' . $f . $active . $visforms->mpforcusclass . '">';

    Herzliche Grüße,
    Aicha
    :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: 7 months 1 week ago by Administrator IV.

    Moderators: Administrator AV, Administrator IV
    Powered by Kunena Forum

    Visforms Subscription

    Visforms Extensions

    Useful extensions for Visforms which enable you to integrate your forms perfectly into your website and to perform special tasks which turn Visforms into much more than just a form generator.

    Info