css - React Carbon Modal Positioning

Question

I'm using the React-Carbon library to design a new part of a frontend for a client, and I'm having problems with the positioning of a modal. As you can see in the image below, clicking on the button in the table opens the modal (and makes the 'darkening' div visible), but the position of the modal isn't relative to where the viewer is currently looking. As a result, it looks as if the modal hasn't opened until you scroll up.

The CSS for the modal is as follows:

.bx--modal {
align-items: center;
box-sizing: border-box;
display: flex;
height: 920px;
justify-content: center;
left: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: fixed;
top: 0px;
visibility: hidden;
width: 1680px;
z-index: 9000;
}

EDIT, the HTML is as follows:

<div role="dialog" class="bx--modal-container" aria-label="Edit requisition" aria-modal="true" tabindex="-1"><div class="bx--modal-header"><h3 id="bx--modal-header__heading--modal-125" class="bx--modal-header__heading">Settings</h3><button class="bx--modal-close" type="button" title="Close" aria-label="Close"><svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-label="Close" width="20" height="20" viewBox="0 0 32 32" role="img" class="bx--modal-close__icon"><path d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"></path></svg></button></div><div id="bx--modal-body--modal-125" class="bx--modal-content" aria-labelledby="bx--modal-header__heading--modal-125"><svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" class="bx--select__arrow"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path></svg></div></div></div></div></div><div class="bx--modal-footer bx--btn-set"><button tabindex="0" class="bx--btn bx--btn--secondary" type="button">Cancel</button><button tabindex="0" class="bx--btn bx--btn--primary" type="button">Save</button></div></div>

Answer 1

If you render the modal into a separate div using React.createPortal (https://reactjs.org/docs/portals.html), you should be able to use the default Carbon modal CSS.

Here is an example codepen: jGBWpE.

H/T to user cbr who suggested this debugging step.