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
Labels
Tech debt improvements to code that do not affect either user or product developers’ experience.

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>...
@evwilkin evwilkin added the Tech debt improvements to code that do not affect either user or product developers’ experience. label Sep 24, 2024
@evwilkin evwilkin self-assigned this Sep 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Tech debt improvements to code that do not affect either user or product developers’ experience.
Projects
Archived in project
Development

Successfully merging a pull request may close this issue.

1 participant