Comments (6)
Hello @janmoser87, can you please explain more your issue.
from material-ui.
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.
from material-ui.
Hey @janmoser87, thanks for the issue! Can you provide a reproducible repo with your code?
from material-ui.
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
from material-ui.
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
from material-ui.
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
from material-ui.
Related Issues (20)
- [@mui/styles] React 17 dependency HOT 1
- [code-infra] Migration to ESLint v9
- Compatibility with React 19 types
- [docs] Introduce User Persona for Enhanced Portuguese/Brazilian Documentation HOT 1
- [material ui] [PaginationItem] Pagination Item component crashes due to a null check missing for contrastText HOT 3
- [material-ui] CSS rule "& > *" not working for some components after the migration from v4 to v5 HOT 1
- [material-ui][Grid] faulty wrapping on firefox if container has non-integer pixel width
- [material-ui] Cannot globally override `margin`/`margin-*` CSS properties of elements represented by `Typography` HOT 2
- [material-ui][Modal] Enhanced Modals Manager with Multi-step Modal Support and Confirm Modal Component
- [docs-infra] Demo toolbar buttons can't be accessed via keyboard HOT 2
- [question] How can I render a specific value in an Autocomplete component differently?
- [docs-infra] Hide Tailwind variables from the dev tools when not used
- [material-ui][Select] Remove focus from the input when the listbox disappears
- [material-ui] Duplicate class names for components
- [material-ui][docs] Improve the Tailwind CSS with Next.js usage section
- [material-ui][Drawer] React does not recognize the slotProps prop HOT 2
- [material-ui][AppRouterCacheProvider] enableCssLayer not working as expected HOT 1
- [material-ui][docs] codemods require certain version of nodejs otherwise fails with "Unexpected token ." HOT 2
- [material-ui][Switch] Undefined/null values in the theme causes crash HOT 1
- [system][question] Issues with using useColorScheme with localstorage HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from material-ui.