You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The default styling for the ".usa-breadcrumb__list-item" class (as it stands in my project) is this:
Would y'all know why it's defaulting to an absolute position with a left property that will never appear within the viewport?
To Reproduce the Bug
Import the <Breadcrumb /> component and its relative counterparts (<BreadcrumbBar />, etc.) and label the breadcrumb link with some text; the text will overflow far off to the left, as the absolute positioning is set to left: -999rem
Expected behavior
I would expect that styling to not be set to something that won't ever appear in the window.
Screenshots
This is how I'm implementing the breadcrumb component
Additional context
Here's the closest source I could find to its implementation in Trussworks' code:
This could also be an issue within USWDS, as I'm sure y'all are just drawing from their styles and packaging them up into importable components. Any and all information would be greatly appreciated!
The text was updated successfully, but these errors were encountered:
greenteaisgreat
changed the title
Default Styling for this Breadcrumb Class Puts it Way Off Screen
Default Styling for this <BreadcrumbLink /> Class Puts it Way Off Screen
Aug 3, 2024
greenteaisgreat
changed the title
Default Styling for this <BreadcrumbLink /> Class Puts it Way Off Screen
Default Styling for this <Breadcrumb /> Class Puts it Way Off Screen
Aug 3, 2024
ReactUSWDS Version & USWDS Version:
React USWDS: 9.0.0
USWDS: 2.14.0
Describe the bug
The default styling for the
".usa-breadcrumb__list-item"
class (as it stands in my project) is this:Would y'all know why it's defaulting to an absolute position with a left property that will never appear within the viewport?
To Reproduce the Bug
Import the
<Breadcrumb />
component and its relative counterparts (<BreadcrumbBar />
, etc.) and label the breadcrumb link with some text; the text will overflow far off to the left, as the absolute positioning is set toleft: -999rem
Expected behavior
I would expect that styling to not be set to something that won't ever appear in the window.
Screenshots
This is how I'm implementing the breadcrumb component
Additional context
Here's the closest source I could find to its implementation in Trussworks' code:
https://github.com/trussworks/react-uswds/blame/9e3bea7ead5042b0cda4cd3f3d9d7bb325f87c07/src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx#L16
This could also be an issue within USWDS, as I'm sure y'all are just drawing from their styles and packaging them up into importable components. Any and all information would be greatly appreciated!
The text was updated successfully, but these errors were encountered: