react-ui-org/react-ui

Review z-index for Modal

mbohal opened this issue · 3 comments

mbohal commented

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
hubacekj commented

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 commented

Point 3 relates to #461.

adamkudrna commented

Just adding a couple of screenshots:

Image
Image
Image