{"action":"created","issue":{"url":"https://api.github.com/repos/callemall/material-ui/issues/1675","labels_url":"https://api.github.com/repos/callemall/material-ui/issues/1675/labels{/name}","comments_url":"https://api.github.com/repos/callemall/material-ui/issues/1675/comments","events_url":"https://api.github.com/repos/callemall/material-ui/issues/1675/events","html_url":"https://github.com/callemall/material-ui/issues/1675","id":107085970,"number":1675,"title":"Question: How to use material-ui react components with the Portal Pattern? ","user":{"login":"ashwinputhige","id":7256876,"avatar_url":"https://avatars.githubusercontent.com/u/7256876?v=3","gravatar_id":"","url":"https://api.github.com/users/ashwinputhige","html_url":"https://github.com/ashwinputhige","followers_url":"https://api.github.com/users/ashwinputhige/followers","following_url":"https://api.github.com/users/ashwinputhige/following{/other_user}","gists_url":"https://api.github.com/users/ashwinputhige/gists{/gist_id}","starred_url":"https://api.github.com/users/ashwinputhige/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ashwinputhige/subscriptions","organizations_url":"https://api.github.com/users/ashwinputhige/orgs","repos_url":"https://api.github.com/users/ashwinputhige/repos","events_url":"https://api.github.com/users/ashwinputhige/events{/privacy}","received_events_url":"https://api.github.com/users/ashwinputhige/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2015-09-17T22:11:10Z","updated_at":"2015-09-17T23:38:12Z","closed_at":null,"body":"While trying to show a dialog from an absolutely positioned div I faced some issues. Centering the dialog on the page with only CSS was not possible.\r\nAlso, the dialog uses ```position:fixed;left:100%``` which is fine when the Dialog is inside \"body\". But with my div, it ended up being invisible but draggable just to the left of my div.\r\n\r\n![dialog](https://cloud.githubusercontent.com/assets/7256876/9947294/efe4ec98-5d4d-11e5-9e22-6893e069c91b.png)\r\n\r\n\r\nAfter some search, I found that the solution is to use the the [Portal Pattern](https://github.com/ryanflorence/react-training/blob/gh-pages/lessons/05-wrapping-dom-libs.md#portals). But this gave me a lot of errors. (Warning: owner-based and parent-based contexts differ ) .  \r\nSo, I was wondering if there is an example on how to use the material-ui Dialog with the Portal pattern.\r\nAlso, I apologize for not providing an example. I will recreate a scenario outside my project and link it here when I am done.\r\n"},"comment":{"url":"https://api.github.com/repos/callemall/material-ui/issues/comments/141280727","html_url":"https://github.com/callemall/material-ui/issues/1675#issuecomment-141280727","issue_url":"https://api.github.com/repos/callemall/material-ui/issues/1675","id":141280727,"user":{"login":"subjectix","id":8528759,"avatar_url":"https://avatars.githubusercontent.com/u/8528759?v=3","gravatar_id":"","url":"https://api.github.com/users/subjectix","html_url":"https://github.com/subjectix","followers_url":"https://api.github.com/users/subjectix/followers","following_url":"https://api.github.com/users/subjectix/following{/other_user}","gists_url":"https://api.github.com/users/subjectix/gists{/gist_id}","starred_url":"https://api.github.com/users/subjectix/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/subjectix/subscriptions","organizations_url":"https://api.github.com/users/subjectix/orgs","repos_url":"https://api.github.com/users/subjectix/repos","events_url":"https://api.github.com/users/subjectix/events{/privacy}","received_events_url":"https://api.github.com/users/subjectix/received_events","type":"User","site_admin":false},"created_at":"2015-09-17T23:38:12Z","updated_at":"2015-09-17T23:38:12Z","body":"I see, I looked at react-portal. The thing about using portals for react components is that they aren't really designed with them in mind, especially those who rely heavily on contexts, even if material-ui does somehow patch that up so you can use the portal pattern, themes will surely give you trouble. \r\n\r\nI'd suggest your flow chart component to have that \"method\" of editing. This way even if you change your mind about modals ([which I suggest you do](https://www.goodui.org/#19)) you can easily change your strategy. \r\nYour flowchart component holding all the states, can enable editing and re-render after the user submits. Easy and concise. :sunglasses: \r\n\r\nBut... the *\"dialog doesn't work within absolutely positioned elements\"* issue would still need resolving :D  "}}