CODEWITHSUNDEEP
typescriptmaterial-ui
Elertan
Elertan

Reputation: 397

Material UI React Modal Dialog on custom container

I'm trying to show a dialog that's only partially modal, as in modal over a specific element, so that the user can still interact with other parts of the application. The docs specify that a dialog component has a container and a fullscreen property. I've tried setting the container property to the div element I want to render the dialog and backdrop on. But without any luck.

enter image description here I want to modal to only be modal on this part of the application as shown in the image.

Here are the docs for the Dialog component https://material-ui-next.com/api/dialog/

Any help would be greatly appreciated!

Upvotes: 13

Views: 10454

Answers (1)

Scott Sword
Scott Sword

Reputation: 4708

I ran into the same issue. It's not documented in the <Dialog /> section, but if you look at the API docs for the <Modal /> component there is a prop called 'container' and since Dialog is really just a modified Modal component you're good to use the same props...

<Dialog
    container={() => document.getElementById('parentCo')}>
</Dialog>

Upvotes: 23

Related Questions