Skip to content

Conversation

@OutlawAndy
Copy link
Member

@OutlawAndy OutlawAndy commented Feb 16, 2023

Task

see issue #138

Screenshots

2023-02-16 14 05 12

CSS SubGrid would provide a much more elegant solution..

I can imagine a .form-row taking over for .form-group with it's own grid area. So, given .form-row > .form-group*n > .form-label+.form-control+.form-error each label/control/error would occupy a grid-row with their respective siblings in neighboring .form-groups. Alas

Screenshot 2023-02-16 at 3 35 13 PM

@Jeremy-Walton
Copy link
Member

I pushed some commits to simplify the fix. It had to do with how it was handling the layout of the inner content of the grid. I use min-content for the rows instead of absolutely positioning and translating the error message.

This also revealed an existing bug with Checkboxes and Radios where they were not laying out correctly.

@Jeremy-Walton Jeremy-Walton linked an issue Feb 16, 2023 that may be closed by this pull request
@Jeremy-Walton Jeremy-Walton added the bug Something isn't working label Feb 16, 2023
@Jeremy-Walton Jeremy-Walton force-pushed the form-errors-cause-field-alignment-issues branch from c777891 to 1bbc30a Compare February 16, 2023 22:25
@Jeremy-Walton Jeremy-Walton merged commit 91a2b73 into main Feb 17, 2023
@Jeremy-Walton Jeremy-Walton deleted the form-errors-cause-field-alignment-issues branch February 17, 2023 16:57
@Jeremy-Walton Jeremy-Walton added the Components Changes to a component label Feb 28, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working Components Changes to a component

Development

Successfully merging this pull request may close these issues.

prevent form-group layout shift when a form-error is attached

3 participants