When the component is locked, I want a band to appear over it. The root of the Review component is a Material UI Paper element with several other elements nested inside. There are multiple instances of this element on the page, and when each one is locked (locked===true), I need something centered both vertically and horizontally to sit on top.
I discovered that using a Popover element works well because it can be positioned at center/center. However, as a Modal, it restricts interaction with the rest of the page.
<Popover
id={"id"}
open={Boolean(anchorEl)}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: 'center',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'center',
horizontal: 'center',
}}
>The content of the Popover.</Popover>
I made sure that the anchorEl points to the correct Paper. This method works for a 'popover'... The popper element, which is not part of the modal tree (allowing for multiple instances without taking control of the entire app), does not have the desired positioning.
<Popper id={'popperID'} open={Boolean(anchorEl)} anchorEl={anchorEl} placement={'top'} transition>
{({ TransitionProps }) => (
<Fade {...TransitionProps}>
<div className={classes.busy}>The content of the Popper.</div>
</Fade>
)}
</Popper>
This results in the element being positioned vertically above my anchorEl, which is not the intended outcome.
I also tried inserting another Paper, but it ends up below my component vertically.
EDIT: I attempted to position it using CSS as well. The issue is that absolute positioning (which should be relative to the parent) seems to be relative to the entire app rather than the JSX parent/component.
How can I achieve this?