[joy-ui][Modal] How to put it in the top of the screen (vertical positioning)? about material-ui

[EyaOuenniche]

Hello @janmoser87, can you please explain more your issue.

[janmoser87]

Hello, sure.

I simply want to put the MUI JOY Modal component, let say, 10px from top of the page. According to my observation, I simply cannot do so because when I set <ModalDialog sx={{top: "10px"}}>, the behavior of such positioning will be "center of the modal is now 10px from top of the page", not "top border of the modal is now 10px from top of the page" .

Example of such positioning can be seen in the attached picture.

[danilo-leal]

Hey @janmoser87, thanks for the issue! Can you provide a reproducible repo with your code?

[janmoser87]

Hello @danilo-leal, sure, here is the example of the behavior: https://github.com/janmoser87/example-dialog

Thank you very much for taking a look!

Jan

[aacevski]

Hey @janmoser87, I created a StackBlitz which should fix the issue for you. Using the Sheet component with a position: relative on the parent seems to be working as expected:
https://stackblitz.com/edit/react-gf96rt?file=Demo.tsx

[janmoser87]

Hello @aacevski , thank you, yes, this approach is working fine. But, isn't it a workaround? :-) I mean, we should be able to position the ModalDialog the same way, shouldn't we? Anyway, from solution point of view, we can close this issue, the proposed approach worked. Thanks again. Jan