I have a project that requires a dialog to be resizable and draggable. Material-UI Dialog documentation has steps on how to make it draggable. I want to find out the resizable part. Any suggestions on how to?
Sample code can be found here.
UPDATE:
Functional and typescript version of @Khabir's answer below
import Button from '@material-ui/core/Button'
import Dialog from '@material-ui/core/Dialog'
import DialogActions from '@material-ui/core/DialogActions'
import DialogContent from '@material-ui/core/DialogContent'
import DialogContentText from '@material-ui/core/DialogContentText'
import DialogTitle from '@material-ui/core/DialogTitle'
import Paper, { PaperProps } from '@material-ui/core/Paper'
import { makeStyles, Theme } from '@material-ui/core/styles'
import TextField from '@material-ui/core/TextField'
import React from 'react'
import Draggable from 'react-draggable'
import { ResizableBox } from 'react-resizable'
const useStyles = makeStyles((theme: Theme) => ({
resizable: {
position: 'relative',
'& .react-resizable-handle': {
position: 'absolute',
width: 20,
height: 20,
bottom: 0,
right: 0,
background:"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+')",
'background-position': 'bottom right',
padding: '0 3px 3px 0',
'background-repeat': 'no-repeat',
'background-origin': 'content-box',
'box-sizing': 'border-box',
cursor: 'se-resize',
},
},
}))
const PaperComponent = (props: PaperProps) => {
return (
<Draggable
handle="#draggable-dialog-title"
cancel={'[class*="MuiDialogContent-root"]'}
>
<Paper {...props} />
</Draggable>
)
}
export const DialogComponent = () => {
const [open, setOpen] = React.useState<boolean>(false)
const handleClickOpen = () => {
setOpen(true)
}
const handleClose = () => {
setOpen(false)
}
const classes = useStyles()
return (
<div>
<Button onClick={handleClickOpen}>Open dd form dialog</Button>
{open && (
<Dialog
open={true}
onClose={handleClose}
maxWidth={false}
PaperComponent={PaperComponent}
aria-labelledby="draggable-dialog-title"
>
<ResizableBox
height={400}
width={600}
className={classes.resizable}
>
<DialogTitle
style={{ cursor: 'move' }}
id="draggable-dialog-title"
>
Subscribe
</DialogTitle>
<DialogContent>
<DialogContentText>
To subscribe to this website, please enter your email address here. We will send updates occasionally.
</DialogContentText>
<TextField
autoFocus
margin="dense"
id="name"
label="Email Address"
type="email"
fullWidth
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
Cancel
</Button>
<Button onClick={handleClose} color="primary">
Subscribe
</Button>
</DialogActions>
</ResizableBox>
</Dialog>
)}
</div>
)
}
typescript 3.8.3 @material-ui/core 4.9.7
I have a project that requires a dialog to be resizable and draggable. Material-UI Dialog documentation has steps on how to make it draggable. I want to find out the resizable part. Any suggestions on how to?
Sample code can be found here.
UPDATE:
Functional and typescript version of @Khabir's answer below
import Button from '@material-ui/core/Button'
import Dialog from '@material-ui/core/Dialog'
import DialogActions from '@material-ui/core/DialogActions'
import DialogContent from '@material-ui/core/DialogContent'
import DialogContentText from '@material-ui/core/DialogContentText'
import DialogTitle from '@material-ui/core/DialogTitle'
import Paper, { PaperProps } from '@material-ui/core/Paper'
import { makeStyles, Theme } from '@material-ui/core/styles'
import TextField from '@material-ui/core/TextField'
import React from 'react'
import Draggable from 'react-draggable'
import { ResizableBox } from 'react-resizable'
const useStyles = makeStyles((theme: Theme) => ({
resizable: {
position: 'relative',
'& .react-resizable-handle': {
position: 'absolute',
width: 20,
height: 20,
bottom: 0,
right: 0,
background:"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+')",
'background-position': 'bottom right',
padding: '0 3px 3px 0',
'background-repeat': 'no-repeat',
'background-origin': 'content-box',
'box-sizing': 'border-box',
cursor: 'se-resize',
},
},
}))
const PaperComponent = (props: PaperProps) => {
return (
<Draggable
handle="#draggable-dialog-title"
cancel={'[class*="MuiDialogContent-root"]'}
>
<Paper {...props} />
</Draggable>
)
}
export const DialogComponent = () => {
const [open, setOpen] = React.useState<boolean>(false)
const handleClickOpen = () => {
setOpen(true)
}
const handleClose = () => {
setOpen(false)
}
const classes = useStyles()
return (
<div>
<Button onClick={handleClickOpen}>Open dd form dialog</Button>
{open && (
<Dialog
open={true}
onClose={handleClose}
maxWidth={false}
PaperComponent={PaperComponent}
aria-labelledby="draggable-dialog-title"
>
<ResizableBox
height={400}
width={600}
className={classes.resizable}
>
<DialogTitle
style={{ cursor: 'move' }}
id="draggable-dialog-title"
>
Subscribe
</DialogTitle>
<DialogContent>
<DialogContentText>
To subscribe to this website, please enter your email address here. We will send updates occasionally.
</DialogContentText>
<TextField
autoFocus
margin="dense"
id="name"
label="Email Address"
type="email"
fullWidth
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
Cancel
</Button>
<Button onClick={handleClose} color="primary">
Subscribe
</Button>
</DialogActions>
</ResizableBox>
</Dialog>
)}
</div>
)
}
typescript 3.8.3 @material-ui/core 4.9.7
Share Improve this question edited Apr 28, 2020 at 14:51 Patrick asked Apr 26, 2020 at 19:12 PatrickPatrick 1231 gold badge1 silver badge7 bronze badges 2- 1 If you could provide us a code snippet of your current attempt that would be greatly appreciated. – Matt Davis Commented Apr 26, 2020 at 19:16
- 2 Well done (for adding the Typescript version) +1 – cssyphus Commented Aug 14, 2020 at 22:05
1 Answer
Reset to default 5Hi I merged two features together. please check the example. It supports both drag and resize.
import React from "react";
import Button from "@material-ui/core/Button";
import Draggable from "react-draggable";
import {withStyles} from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import {ResizableBox} from "react-resizable";
import Paper from "@material-ui/core/Paper";
const styles = theme => ({
resizable: {
position: "relative",
"& .react-resizable-handle": {
position: "absolute",
width: 20,
height: 20,
bottom: 0,
right: 0,
background:
"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+')",
"background-position": "bottom right",
padding: "0 3px 3px 0",
"background-repeat": "no-repeat",
"background-origin": "content-box",
"box-sizing": "border-box",
cursor: "se-resize"
}
}
});
function PaperComponent(props) {
return (
<Draggable handle="#draggable-dialog-title" cancel={'[class*="MuiDialogContent-root"]'}>
<Paper {...props} />
</Draggable>
);
}
class DraggableResizableDialog extends React.Component {
state = {
open: false
};
handleClickOpen = () => {
this.setState({open: true});
};
handleClose = () => {
this.setState({open: false});
};
render() {
return (
<div>
<Button onClick={this.handleClickOpen}>Open dd form dialog</Button>
{this.state.open && (
<Dialog
open={true}
onClose={this.handleClose}
maxWidth={false}
PaperComponent={PaperComponent}
aria-labelledby="draggable-dialog-title"
>
<ResizableBox
height={400}
width={600}
className={this.props.classes.resizable}
>
<DialogTitle style={{ cursor: 'move' }} id="draggable-dialog-title">Subscribe</DialogTitle>
<DialogContent>
<DialogContentText>
To subscribe to this website, please enter your email address
here. We will send updates occasionally.
</DialogContentText>
<TextField
autoFocus
margin="dense"
id="name"
label="Email Address"
type="email"
fullWidth
/>
</DialogContent>
<DialogActions>
<Button onClick={this.handleClose} color="primary">
Cancel
</Button>
<Button onClick={this.handleClose} color="primary">
Subscribe
</Button>
</DialogActions>
</ResizableBox>
</Dialog>
)}
</div>
);
}
}
export default withStyles(styles)(DraggableResizableDialog);
Source: Draggable Resizable