Kalendar Icon fehlt im Layout Bootstrap 5

Hallo,
miene Website läuft mit Joomla 5.
Habe ein Formular mit einem Datumsfeld. Wenn ich beim Laout UiKit3 wähle wird bei dem Feld ein Icon für den Kalendar angezeigt.
Ich nutze Bootstrap 5. Dort gibt es zwar das Feld für den Kalendar (und es funktiomniert auch) aber leider wird dort kein Icon angezeigt.
Wäre für einen Tip wie ich auch in diesem Layout ein Kalendaricon bekomme dankbar.

Viele Grüße
Jochen

Hallo Jochen,

mit dem standard Cassiopeia-Template (ist ein Bootstrap5-Template) und der Einstellung 'Bootstrap5'-Layout im Formular, wird das Kalendericon korrekt angezeigt.
Mit einem UiKit3-Template und der Einstellung 'UiKit3'-Layout im Formular, wird das Kalendericon ebenfalls korrekt angezeigt.

Die Einstellung des UI-Frameworks in Visforms muss zum UI-Framework passen, das dein Template verwendet.
Eine Mischung hingegen führt zu unerwarteten Ergebnissen.
Wenn du ein Bootstrap5-Template hast, dann musst du in Visforms selbstverständlich auch die entsprechende passende Einstellung für das UI-Framework vornehmen.

Falls trotz der richtigen passenden Einstellung für das UI-Framework, das Icon nicht kommt, liegt es an einem der folgenden Ursachen:
- verhält sich das verwendete Template eigenartig bzw. ist nicht richtig konfiguriert,
- setzt das verwendete Template nicht den Standard um,
- basiert das verwendete Template auf einem anderen UI-Framework als gedacht.

Test:

Du kannst mal versuchen das Cassiopeia Template (ist ein Bootstrap5-Template) zu wählen und die Einstellung 'Bootstrap5'-Layout im Formular.
Dann sollte auch bei dir das Icon zu sehen sein.

Liebe Grüße, Ingmar

Hallo Ingmar,
herzlichen Dank für deine ausführliche Antwort.
Ich verwende das Sombra Template von Unitemplates, das unterstützt Bootstarp 5.
Da wird das Framework Helix ultimate verwendet. Laut Beschreibung wird dort für Icons der Font Awesome verwendet.
Aber irgendwie scheint das mit Visforms nicht zu gehen.
Wenn ich beim Layout des Formulars auf UiKit3 umstelle sieht man das Kalendar Icon.
Dachte evt könnte ich über einen CSS Custom Code dieses Icon auch für Bootstrap 5 Layout bekommen.
Weil ansontsen passt das mit Bootstrap 5 Layout sehr gut auch das mobile Layout sieht gut aus.

Liebe Grüße
Jochen

Hallo Jochen,

Website Helix Ultimate: www.joomshaper.com/joomla-templates/helixultimate
Zitat: The template is developed with Bootstrap 5.

Dieses HTML
mit diesem CSS erzeugen zusammen mit dem von Visforms gelieferten und geladenen Icon-Font bei Bootstrap 5 das Kalender-Icon.
Das sollte also offensichtlich überall funktionieren.

Folgendes:

- Es wäre hilfreich gewesen, du hättest es einmal mit dem Cassiopeia-Template und der Einstellung 'Bootstrap5'-Layout im Formular versucht.
Das wäre wichtig für die Fehleranalyse.
- Es wäre hilfreich gewesen, du hättest einen Link zum Formular mit dem Fehler beigefügt, sodass ich mit den Web-Browser Developer Tools mal kurz rein schauen kann.
Das wäre wichtig für die Fehleranalyse.

Um zu wissen, wie du das Kalender-Icon wieder zum Vorschein bekommst, musst du verstehen, warum es bei deinem Template nicht mehr angezeigt wird.
Gerendert, wie oben gezeigt, wird es durch Visforms auf alle Fälle.

Die Frage ist, was das CSS deines Templates mitbringt und wie es sich auswirkt (Link zum Formular mit dem Fehler).
Die Frage ist auch, ob der Icon-Font von Visforms korrekt installiert ist und laden kann (Cassiopeia-Template und der Einstellung 'Bootstrap5'-Layout).

Genaueres kannst du in den Web-Browser Developer Tools sehen.

Liebe Grüße, Ingmar

Hallo Ingmar,
nochmal danke für deine Infos.
Die Website ist erst seit kurzer Zeit jetzt online. Hatte das alles lokal entwickelt.
Hier wäre der Link auf das Formular
Formular mit Datum

Wenn sich das jetzt nicht so einfach klärenn lässt ist das nicht so tragisch, das geht ja auch ohne dieses Icon.

Habe es jetzt lokal auch noch mit Cassiopaia und Layout Bootstrap 5 probiert.
Da ist das Icon zu sehen.

Scheint ja dann eher ein Problem bei mir zu sein.

Liebe Grüße
Jochen

Hallo Jochen,

neben deinem Template und Visforms spielt auch dein eigenes custom-CSS eine entscheidende Rolle.

Für das umschließende Button-Element hast du für ein '.btn-secondary' in deinem custom.css ab Zeile 7 das folgende CSS definiert.
Dadurch wird die Hintergrund-Farbe auf Weiß festgelegt.
Diese Regel wird vom Span-Element (Kind-Element) geerbt.


In deinem Template ist die Schriftfarbe-Farbe ('color') über die CSS-Variable '--bs-btn-color' für ein '.btn-secondary' aber ebenfalls auf Weiß festgelegt.
Dadurch kann das Kalender-Icon in deinem Fall nicht gesehen werden, da Vordergrund-Farbe (dein Template-CSS) und Hintergrund-Farbe (dein Custom-CSS) übereinstimmen.

Möglichkeit 1:
Wenn du dein 'background-color: white !important;' von oben entfernst, dann ist das Kalender-Icon zumindest wieder zu sehen.
Allerdings nur ein weißes Kalender-Icon auf grauem Hintergrund.
Der graue Hintergrund kommt ebenfalls durch das Template-CSS.

Möglichkeit 2:
Du behältst dein 'background-color: white !important;' von oben bei.
Wenn du nun folgendes CSS hinzufügst, wird das Kalender-Icon auf weißem Hintergrund in einem passenden dunklen Grau dargestellt.


Liebe Grüße, Ingmar