Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Validation errors should not shift input fields #232

Closed
mavarius opened this issue Aug 15, 2019 · 4 comments · May be fixed by #613
Closed

Validation errors should not shift input fields #232

mavarius opened this issue Aug 15, 2019 · 4 comments · May be fixed by #613
Assignees
Labels
kind/bug Something isn't working

Comments

@mavarius
Copy link
Collaborator

Describe the bug
When error messages appear below input fields, everything below them shifts.

Expected behavior
The layout of the form should remain static when validation errors are present.

@mavarius mavarius added the kind/bug Something isn't working label Aug 15, 2019
@daviddkkim
Copy link
Contributor

daviddkkim commented Apr 22, 2021

Screen Shot 2021-04-22 at 11 15 39 AM

I can make this work for if there is only error message. but if there are both error message And help message, I'm not sure I can make the spacing work because of how absolute positioning works with css. But I could be completely wrong here.

options:

  1. I can make it so that when error message is present, we hide the help message.
  2. We figure out some genius way to absolute position both the help and error message relative to each other despite both being absolute positions

Thoughts ? @mavarius

@daviddkkim
Copy link
Contributor

daviddkkim commented Apr 22, 2021

I took a look at how other design systems handle this,

Material UI has it so that the helper text does both normal state helper message and error message. The error state toggle just changes the color and messaging of the helper text.

Carbon has it so that the error message take up space when it appears and shifts everything below.

I like the idea of the error message not shifting things just as this issue points out so maybe we could emulate the material uI pattern?

@mavarius
Copy link
Collaborator Author

Let's go with the error message replacing the helper text.

@kristinarobinson
Copy link

close this until a specific input field is referenced.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
kind/bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants