search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.89k stars 32.26k forks source link

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

Open janmoser87 opened 9 months ago

janmoser87 commented 9 months ago

Related page

https://mui.com/joy-ui/react-modal/

Kind of issue

Unclear explanations

Issue description

One of the use cases for Modals is to put them not in the center of the screen, but on the top of the screen.

It is not possible now.

Example: <ModalDialog sx={{top: "5px"}}> puts the CENTER of the dialog 5px from the top, not its TOP RIGHT corner how I would expect for absolute positioning.

Context

For mobile applications, when you want to fill something, the native mobile keyboard gets opened right away and if the modal is in the center of the srceen, it is covered partially by the native keyboard.

I want to put modal on the top of the screen so the user can start typing right away without scrolling first to see the modal (rest of the page)

Search keywords: modal, modaldialog

EyaOuenniche commented 9 months ago

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

janmoser87 commented 9 months ago

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. image

danilo-leal commented 8 months ago

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

janmoser87 commented 8 months ago

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 commented 8 months ago

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 commented 7 months ago

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