Last active
July 4, 2018 21:59
-
-
Save ThadeuLuz/0fafd4b44682df34ac807ebbd051a6f8 to your computer and use it in GitHub Desktop.
This is a fix of several problems I had when using the vanilla Material-ui Dialog like using javascript for height, lack of full screen for mobile, having to choose the body scroll visibility regardless of screen/content size and the body scroll position in some browsers. Tested on latest chrome and safari only. Please let me know if you think i…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.dialog-root { | |
padding: 0 !important; | |
} | |
.dialog-root > div:first-child { | |
height: 100%; | |
} | |
/* Used as wrapper */ | |
.dialog-root > div:first-child > .dialog-content { | |
transform: none !important; | |
width: 100% !important; | |
height: 100% !important; | |
max-width: none !important; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
} | |
/* Actual content */ | |
.dialog-root > div:first-child > .dialog-content > div { | |
width: 100%; | |
max-width: 800px; | |
max-height: 100%; | |
display: flex; | |
flex-direction: column; | |
} | |
.dialog-root > div:first-child > .dialog-content > div > .dialog-body { | |
padding: 0 !important; | |
border-top: solid #e0e0e0 1px; | |
border-bottom: solid #e0e0e0 1px; | |
display: flex; | |
} | |
.dialog-root > div:first-child > .dialog-content > div > .dialog-body > .dialog-scroll { | |
padding: 0 16px 16px 16px; | |
width: 100%; | |
overflow: auto; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { PropTypes } from 'react'; | |
import MDialog from 'material-ui/Dialog'; | |
import './dialog.css'; | |
const Dialog = props => ( | |
<MDialog | |
{...props} | |
repositionOnUpdate={false} | |
autoDetectWindowHeight={false} | |
autoScrollBodyContent={false} | |
className="dialog-root" | |
contentClassName="dialog-content" | |
bodyClassName="dialog-body" | |
> | |
<div className="dialog-scroll" > | |
{props.children} | |
</div> | |
</MDialog> | |
); | |
Dialog.propTypes = { | |
children: PropTypes.node, | |
}; | |
export default Dialog; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment