designsystem: 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

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 16 (16 by maintainers)

Most upvoted comments

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 on May 10, 2019

30lwj1

ivarni on May 10, 2019

Peek 2019-05-09 11-51

@antidecaf You were thinking about something like this? Anything that makes the error-message larger than lineheight will still shift the layout.

I obviously had to increase the bottom margin of inputgroups (well, actually inputs contained in inputgroups) to leave open room for the error, I am unsure if that is a breaking change or not? And should I put in an opt-out prop for those that absolutely do not want the extra margins for some reason and rather would take the layout shift?

Also, haven’t tested this with inline/text-like but can do that if we still want this.

ivarni on May 9, 2019