Skip to content

Jumplinks demo offset incorrect #11051

@evwilkin

Description

@evwilkin

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>...

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions