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.

Sign up for GitHub

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

Jump to bottom

Modal component preventScrollUnderneath prop not working #472

Closed
mbohal opened this issue Jul 26, 2023 · 1 comment · Fixed by #482
Closed

Modal component preventScrollUnderneath prop not working #472

mbohal opened this issue Jul 26, 2023 · 1 comment · Fixed by #482
Assignees
@mbohal
Labels
bug Something isn't working
Milestone
v1.0.0

Comments

@mbohal
Copy link
Contributor

mbohal commented Jul 26, 2023

When migrating to MkDocs/Docoff based docs (#440) an issue with the prop preventScrollUnderneath in the Modal component appeared.

It seems that the default scroll prevention does not work with the MkDocs platform:

  1. Scrolling is possible when preventScrollUnderneath="default"
  2. In Chrome (FF is OK) there is extra padding in the top right corner when Modal is open:
    image
@mbohal mbohal added the bug Something isn't working label Jul 26, 2023
@mbohal mbohal added this to the v1.0.0 milestone Jul 26, 2023
@mbohal mbohal added this to The Board Jul 26, 2023
@github-project-automation github-project-automation bot moved this to 💡Ideas in The Board Jul 26, 2023
@mbohal mbohal moved this from 💡Ideas to 🔖 To do in The Board Jul 26, 2023
@hubacekj
Copy link
Contributor

hubacekj commented Aug 7, 2023

The reason why preventScrollUnderneath="default" does not work is that we prevent scrolling by default on the body element. This documentation, however, has the scroll on the <html> element. I tried to replace the body with the documentElement in the hook and it worked as expected.

I think that leaving the scroll prevention by default on the body element is actually the correct way, which leaves us with 2 options:

  1. Make changes to the documentation so that the scrolling is on the body
  2. Add custom preventScrollUnderneath object to all the modals with basically a 1 to 1 copy of the code in the useModalScrollPrevention if (preventScrollUnderneath === 'default' branch

mbohal added a commit that referenced this issue Aug 28, 2023
@mbohal
Allow the Modal component to block scrolling on any HTML element in…
c7b944b 
…stead of just the `<body>` element (#472)
@mbohal mbohal added bug Something isn't working and removed bug Something isn't working labels Aug 28, 2023
@mbohal mbohal self-assigned this Aug 28, 2023
@mbohal mbohal moved this from 🔖 To do to 👀 In review in The Board Aug 28, 2023
@adamkudrna adamkudrna mentioned this issue Aug 30, 2023
Merged
adamkudrna pushed a commit that referenced this issue Sep 11, 2023
@mbohal @adamkudrna
Allow the Modal component to block scrolling on any HTML element in…
1503bd6 
…stead of just the `<body>` element (#472)
adamkudrna pushed a commit that referenced this issue Sep 13, 2023
@mbohal @adamkudrna
Allow the Modal component to block scrolling on any HTML element in…
fdbf946 
…stead of just the `<body>` element (#472)
@github-project-automation github-project-automation bot moved this from 👀 In review to ✅ Done in The Board Sep 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mbohal mbohal

Labels
bug Something isn't working
Projects
The Board
Archived in project
Milestone
v1.0.0
2 participants
@mbohal @hubacekj