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

Review z-index for Modal #471

Closed
mbohal opened this issue Jul 26, 2023 · 3 comments · Fixed by #504
Closed

Review z-index for Modal #471

mbohal opened this issue Jul 26, 2023 · 3 comments · Fixed by #504
Labels
bug Something isn't working documentation Improvements or additions to documentation
Milestone

Comments

@mbohal
Copy link
Contributor

mbohal commented Jul 26, 2023

When migrating to MkDocs/Docoff based docs (#440) an issue appeared with z-index preference. The MkDocs sticky header covers Modal which is wrong.

image

Expected behavior: Modal covers the sticky header, not vice versa.

How to reproduce:

  1. Go to http://localhost:8000/components/Modal/#position
  2. Modify the code by adding the attribute preventScrollUnderneath="off" to the Modal component
  3. Click the Launch modal at top button
  4. Scroll to the top of the page
@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

It is caused by different stacking contexts for the sticky header and for the Modal. Both have their own stacking contexts caused by setting position: sticky and transform css property respectively. There are two immediate (one future) solutions:

  1. Stop using transform property and replace it with negative margins (requires a javascript resize listener - therefore I wouldn't prefer it)
  2. Use portal above all other elements in the documentation
    (3.) Use a native dialog element

@adamkudrna
Copy link
Member

adamkudrna commented Aug 7, 2023

Point 3 relates to #461.

@adamkudrna
Copy link
Member

adamkudrna commented Aug 11, 2023

Just adding a couple of screenshots:

Image
Image
Image

@adamkudrna adamkudrna moved this from 🔖 To do to 🏗 In progress in The Board Oct 18, 2023
@adamkudrna adamkudrna moved this from 🏗 In progress to 👀 In review in The Board Oct 18, 2023
adamkudrna added a commit that referenced this issue Oct 18, 2023
Install the latest version of docoff that no longer establishes a new stacking context within previews.
@adamkudrna adamkudrna added documentation Improvements or additions to documentation bug Something isn't working and removed bug Something isn't working labels Oct 18, 2023
adamkudrna added a commit that referenced this issue Oct 20, 2023
Install the latest version of docoff that no longer establishes a new stacking context within previews.
@github-project-automation github-project-automation bot moved this from 👀 In review to ✅ Done in The Board Oct 20, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working documentation Improvements or additions to documentation
Projects
Archived in project
Development

Successfully merging a pull request may close this issue.

3 participants