[Gelöst] Bei Sprung zum leeren Pflichtfeld ist dieses nicht sichtbar durch StickyMenü

[LeoDesign]

Sorry für diese klobige Titelbeschreibung!

Wenn ich ein Formular absenden will was unzureichend ausgefüllt ist, sollte eigentlich die Fehlermeldung mit dem leeren oder nicht ausgefüllte Pflichtfeld angezeigt werden. Dies ist aber nicht der Fall, da zumindest das Feld hinter dem sich häufig im Einsatz befindlichen Sticky Menü verschwindet! Hingegen ist der Hinweis ("Füllen Sie dieses Feld aus.") zu sehen, da er wahrscheinlich durch z-index im Vordergrund platziert ist.

Ich habe mir nun zig Contao-Themes angeschaut, auch die bekannten Premium-Varianten: Nirgends wurde dieser Umstand berücksichtigt! Es gibt aber genügend nicht unbedingt internetaffine Mitmenschen, die nicht darauf kommen, ein wenig nach oben zu scrollen und mich dann dauernd nerven, dass sie das Formular nicht ausfüllen könnten, es ließe sich nicht abschicken! Gibt es eine Lösung, wie man diese "Sprungmarke" irgendwie um X-Pixel verschieben könnte? Mittels CSS geht es glaube ich nicht und dann bin ich auch schon am Ende.

Vielleicht hat da jemand mal einen guten Tipp. Eigentlich sollte das dann in jedem Theme mit Sticky Menü Anwendung finden...
Freue mich auf eure Rückmeldungen!

Gruß Gunnar

[do_while]

Du kannst Den Anker per CSS verschieben

Beispiele:
https://we-lounge.de/index.php/2017/...rallax-effekt/
https://www.level2.blog/wordpress-bl...s-verschieben/

[LeoDesign]

Du kannst Den Anker per CSS verschieben.

Danke für den Hinweis, ich kenne sogar beide Seiten – aber eben in Bezug auf Anker.
Wie soll das denn in einem Formular funktionieren?!? Würde mich über eine Aufklärung freuen, wie das hier konkret zur Anwendung kommen kann!

[do_while]

Das habe ich dann falsch verstanden. Eine Sprungmarke (Anker) ist das ja nicht. In Deinem Fall hast Du eine/oder mehrere Fehlermeldungen, die zwar als Klasse .error ausgezeichnet sind, aber kein Anker sind.

Da bleibt wohl nur Javascript, um die oberste Fehlermarkierung zu suchen und in den sichbaren Bereich zu bringen.
JavaScript mache ich leider zu wenig, um hier Tipps zu geben.

[LeoDesign]

Trotzdem danke für deine Rückmeldung!
Ja, davon bin ich ausgegangen, dass es mit Javascript machbar ist. Eine html5-valide Lösung wäre natürlich besser, wenn es denn geht. Vielleicht (und das hoffe ich doch :-) gibt es hier jemanden, der auf das Problem eine Lösung weiß. Wie gesagt, bislang wüsste ich kein Theme, wo dieser Fehler korrigiert wurde...

Folgend ein kleines Beispiel. Wo klicken die Leute hin? Im Menü auf "Pages" und schon ist alles, was ins Formular eingegeben wurde futsch. Das macht nur Ärger...
Anmerkung 2020-05-20 110653.jpg

Gruß Gunnar

[LeoDesign]

Die Kollegen von RockSolid haben mir eine völlig simple CSS-Lösung auf das Problem geliefert:

html {
    scroll-padding: 112px 0 0;
}

Herzlichen Dank an dieser Stelle! Ich hoffe, es findet reichlich Anwendung.
Gruß Gunnar