Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jumplinks demo offset incorrect #11051

Closed
evwilkin opened this issue Sep 24, 2024 · 0 comments · Fixed by #11054
Closed

Jumplinks demo offset incorrect #11051

evwilkin opened this issue Sep 24, 2024 · 0 comments · Fixed by #11054
Assignees

Comments

@evwilkin
Copy link
Member

evwilkin commented Sep 24, 2024

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>...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Archived in project
Development

Successfully merging a pull request may close this issue.

1 participant