-
Notifications
You must be signed in to change notification settings - Fork 378
Closed
Description
Jumplinks with drawer demo was updated in #10993 but the offset is too small (doesn't include spacing around the breadcrumb or the page main container) so the scrolling & scrollspy causes the heading to scroll too far behind the toolbar drawer toggle.
This could be fixed by:
- Updating the breadcrumb selector to include the top padding:
const breadcrumb = document.getElementsByClassName('pf-v6-c-page__main-breadcrumb')[0]; - Adding the pf-v6-c-page__main-container margin-inline-start:
import c_page__main_container_MarginInlineStart from '@patternfly/react-tokens/dist/esm/c_page__main_container_MarginInlineStart';
const pageMargin = c_page__main_container_MarginInlineStart.value;
// multiply rems by fontsize to get px
const pageMarginPx = parseFloat(pageMargin) * parseFloat(getComputedStyle(document.documentElement).fontSize);
setOffsetHeight(masthead.offsetHeight + pageMarginPx + breadcrumb.offsetHeight + drawerToggleSection.offsetHeight);
Alternately, simply add the hasOverflowScroll prop to the headings/text page section and forget about calculating the offset:
<PageSection hasOverflowScroll>
<Content>...
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels
Type
Projects
Status
Done