Menu
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
709
We can make a full-screen dialog responsive with the useMediaQuery hook. to add a responsive dialog that's also full screen. We used the useTheme hook to get the theme. And with it, we use the useMediaQuery to get the breakpoint to pass in to the hook.
Material UI is a Material Design library made for React. It’s a set of React components that have Material Design styles. In this article, we’ll look at how to customize dialog boxes with Material UI. We can create our own dialog components by putting into our own components and passing in various styles to it.
Responsive layouts in Material Design adapt to any possible screen size. We provide the following helpers to make the UI responsive: Grid: The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts. Container: The container centers your content horizontally.
We can create our own dialog components by putting into our own components and passing in various styles to it. For example, we can write:
To create the DialogTitle component, we passed a component that uses the classes and children from the props. The classes are applied to icon buttons and dialog titles. Also, we created the DialogContent and DialogActions in similar ways. We changed the padding slightly to create both components. Then we used them all in the App component.
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
195
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
