Save space for error messages in order to avoid page jumps on validation

Which package is this issue related to?

ffe-form

Describe your issue (screenshots welcome!)

In some instances the page layout may jump when validation error messages are inserted, because an extra line of content is injected into the page flow.

Without error message:

With error message:

This can be avoided by saving the space needed for an error message by default (padding, height, etc), then positioning the error message absolute or in other ways style it so that it does not affect the height of its containing block.

What is the expected behavior?

The page flow should not change on validation.

What is the actual behavior?

The page jumps.

Steps to reproduce

[ivarni]

I’ll try that later, and if not I can swap the error element to a p.

:first-of-type did work, so I could do

.ffe-radio-block {
    margin-top: -10px;
    margin-bottom: 30px;

   &:first-of-type {
       margin-top: 20px;
   }
}

But I kinda threw up in my mouth a little so unless your trick works I’ll go with a p.

[ivarni]