Skip to content

Instantly share code, notes, and snippets.

@ThadeuLuz
Last active July 4, 2018 21:59
Show Gist options
  • Save ThadeuLuz/0fafd4b44682df34ac807ebbd051a6f8 to your computer and use it in GitHub Desktop.
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…
.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;
}
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