Browser-Scrollverhalten korrigieren, nach Submit mit fehlerhaftem Formularpflichtfeld ...

[horst]

Hi, ich meine folgende Situation, bzw. folgendes Browser-Standardverhalten:

ein Formular mit einem, z.b. leeren Pflichteingabefeld wird versendet. Der Browser erkennt die fehlende Eingabe, stoppt den Versand und scrollt das (erste) leere Feld nach oben in den Viewport, wenn es sich ausserhalb des Viewports befand. Dann wird im Feld noch ein Minipopup angezeigt, wie etwa "bitte feld ausfüllen", oder so ähnlich.

Meines Wissens nach brauchts dafür keinerlei besondere Angaben im Formular(header) noch irgendwelches Javascript usw. Die Browser machen das automatisch. Einziges Fehlverhalten kann entstehen wenn die Seite eine position:fixed TopMenubar beinhaltet. Dann werden die leeren Felder inkl. MiniPopup evtl so im Viewport positioniert, das sie gar nicht sichtbar sind, da von der TopMenubar überdeckt.

Ich weiss das man da was mit JS machen kann, das möchte ich aber nicht. Ich meine, da gibts doch auch eine CSS-Angabe, die den Browser dann um ## Pixel korrigiert.?! Aber es fällt mir nicht mehr ein wie das heisst.

Kann mir vlt. jemand auf die Sprünge helfen?

[Gunnar Bittersmann]

@@horst

Ich weiss das man da was mit JS machen kann, das möchte ich aber nicht. Ich meine, da gibts doch auch eine CSS-Angabe, die den Browser dann um ## Pixel korrigiert.?! Aber es fällt mir nicht mehr ein wie das heisst.

scroll-padding-top.

Es wirkt nur nicht: Beispiel (in Chromia; Firefox rückt das erste invalide Eingabefeld in die Mitte).

Dafür zeigt das Beispiel deutlich die Unsinningkeit von placeholder.

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar,

was bedeutet das nun? Ist Firefox übergründlich und nutzt scroll-padding-top für einen Effekt, den die Spec nicht vorsieht? Oder ist Caniuse zu oberflächlich mit der Angabe, dass Chromia scroll-padding-top zu 100% unterstützen täten?

Caniuse listet bei Safari 11-14 einen Bug:

Scroll padding is not applied for scrolls to fragment target or scrollIntoView()

Die Positionierung von Feldern mit Validierungsfehler klingt nach einem scrollIntoView-Effekt. Wenn der bei Chromia nicht greift, wäre das ein Bug. Aber ein solcher ist nicht angegeben.

Ich habe gerade keine Zeit für Recherche.

Auf jeden Fall klingt das für mich nach einem weiteren Beispiel dafür, dass position:fixed ein undurchdachter Behelf ist, der schnell an seine Grenzen stößt (oder User braucht, die mitdenken). Selbst wenn scroll-position-top bei Chromia funktionierte, braucht es JS-Unterstützung, um die top-Position aus der Höhe des fixen Bereichs zu errechnen.

Die einfachere und besser verständliche Lösung ist aus meiner Sicht, ein 100vw×100vh großes Layout-Grid für den Viewport zu realisieren, in dem der scrollbare Bereich eine Zelle einnimmt und das die fixierten Bereiche festlegt. Hier kann man "auto" oder "fit-content" dafür sorgen, dass ihre Größe ohne weiteres Zutun auf den Scrollbereich einwirkt.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Die Positionierung von Feldern mit Validierungsfehler klingt nach einem scrollIntoView-Effekt.

Hm, weiß nicht, was Browser da tun. Firefox schiebt das betreffende Eingabeelement jedenfalls in die Mitte, was ja auch sinnvoll ist. Das Verhalten von Chrome, das Ding an den oberen Rand zu schieben, ist ja ziemlich bescheuert. Was hat man davon, wenn man das Label darüber nicht im Blickfeld hat?

Die einfachere und besser verständliche Lösung ist aus meiner Sicht, ein 100vw×100vh großes Layout-Grid für den Viewport zu realisieren, in dem der scrollbare Bereich eine Zelle einnimmt und das die fixierten Bereiche festlegt.

Sieht dann so aus: form validation, grid. Funktioniert (mehr schlecht als recht, s.o.) auch in Chromia.

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar,

Das Verhalten von Chrome, das Ding an den oberen Rand zu schieben, ist ja ziemlich bescheuert

Jo. Ob das ein Ticket rechtfertigt? Das Label wäre ein gutes Argument.

Rolf

[horst]

Hey, merci!

Ja das meinte ich, scroll-padding-top.

Und ja, gerade ausprobiert: funktioniert nicht. :-(

In meiner Erinnerung hat das aber (mal) funktioniert, sonst hätte ich mich doch nicht daran erinnert. :-)

Na, jedenfalls Danke! 🙋‍♂️