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

• javascript
• css
• reactjs
• material-ui

• 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 1

Hi 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