pigui/landing-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stop the form moving when it reports errors

Browse Source 
Pressing Enviar on an incomplete form pushed everything below each
errored field downwards. Material's subscript strip is 10px tall while a
field is valid and 24px once it carries a message, so the form grew by
14px per field at the moment of the click -- the submit button moved out
from under the cursor. The taller height is now reserved up front.

The consent message had two problems of its own. It rendered as an
inline span straight after the label, so it read as part of the
sentence: "Acepto que guardéis mis datos para responderme. Hace falta tu
consentimiento". And nothing in @pi/ui styles `.pi-checkbox__error`, so
it inherited the body colour and size -- ordinary text sitting beside
four red ones. It now gets its own reserved line, in the warn colour at
the same 12px as every other message.

Verified in both themes: the form grows 0px on submit, and all five
messages match at 12px in the warn colour.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
pigui
2026-08-31 09:51:47 +02:00
parent 7557894b49
commit 6004110fcf
1 changed files with 39 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
landing/src/app/ui/contact-form.scss
View File

@@ -81,3 +81,42 @@
--pi-theme-field-radius: 1.25rem; --pi-theme-field-radius: 1.25rem;
} }
} }
// Error states, which move the form around and read wrong.
//
// 1. Submitting an incomplete form shoved everything below it downwards.
// Material's subscript strip is 10px tall while a field is valid and 24px
// once it carries a message, so every errored field grew the form by 14px at
// once — the fields under the cursor jumped out from under it. Reserving the
// taller height up front costs 14px of whitespace and buys a form that does
// not move.
//
// 2. `pi-checkbox` renders its message as an inline span straight after the
// label, so it ran on as part of the sentence: "Acepto que guardéis mis
// datos para responderme. Hace falta tu consentimiento". It belongs on its
// own line, like every other field's message.
:host ::ng-deep {
.pi-field .mat-mdc-form-field-subscript-wrapper {
min-height: 1.5rem;
}
// Its own line, in space reserved for it. Left in flow it would push the
// submit button 25px down at the exact moment you press it — the same jump
// the reserved subscript above removes for the fields.
.pi-checkbox {
position: relative;
padding-bottom: 1.25rem;
}
// Nothing in the library styles this class, so the message inherited the
// body colour and read as ordinary text next to four red ones.
.pi-checkbox__error {
display: block;
position: absolute;
left: 0;
bottom: 0;
color: var(--pi-color-warn);
// `mat-error` renders the other four at 12px; this one inherited 15px.
font-size: var(--pi-font-size-x-small, 0.75rem);
}
}