-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Closed
Description
Description
The red border added to usa-form-group--error
divs has a negative margin of -2.5
units. This is equal to the border size + its padding so it causes the margin to be pushed off screen unless the user has added additional padding to its parent element.
This error border helps to signify the form's error state and should be maintained in desktop views.
Steps to reproduce the issue
- Visit form error state storybook preview
- Resize the window from horizontally
- In smaller views, the error border will be visible
- In wider views, the error border will be pushed out of view.
Additional information
Related code
uswds/src/patterns/components/usa-form-group/_usa-form-group.scss
Lines 1 to 11 in df175b5
// Block input elements | |
.usa-form-group--error { | |
@include u-border-left(0.5, "error-dark"); | |
margin-top: units(4); | |
padding-left: units(2); | |
position: relative; | |
@include at-media("desktop") { | |
margin-left: units(-2.5); | |
} | |
} |
Metadata
Metadata
Assignees
Labels
Type
Projects
Status
Done