Tips for implementing resizable Material-UI Dialogs

I'm working on a project that involves creating a dialog box that can be resized and dragged. While I found steps in the Material-UI Dialog documentation on how to make it draggable, I'm still looking for information on how to make it resizable. Any suggestions on how to achieve this?

You can check out a sample code here.

UPDATE:

Here is the functional and typescript version of @Khabir's answer:

    // Code goes here

For more details, you can refer to the full code snippet above.

This solution was implemented using typescript 3.8.3 and @material-ui/core 4.9.7

javascriptcssreactjsmaterial-ui

Answer №1

Hey there! Just wanted to let you know that I recently combined two features into one. Feel free to review the example below, which now includes both drag and resize functionalities.

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+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC...

Check it out as well: Click here for draggable component and this link for resizable feature!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

There seems to be a connection issue between my Jquery and HTML, as they

I've hit a roadblock because my jQuery isn't connecting and I can't seem to figure out why. It's been stumping me for hours. Here is the HTML code snippet from exercise6.html: <!DOCTYPE html> <html lang="en> <h ...

javascriptjqueryhtml

Navigating Errors within Nested Promises: A Clear Perspective

Struggling with my first node.js backend, I am currently refactoring the login function. However, I seem to be missing something crucial when it comes to promise chaining and error handling. If anyone could help me identify where I'm going wrong, I wo ...

javascriptnode.jspromise

Using html() to load dynamic data can cause the script to malfunction if the content being loaded contains special characters

Utilizing the html() function, I am retrieving dynamic data from the database and appending it to my HTML. Everything functions correctly, except when the dynamic data contains '>' or '<' tags as data. In this scenario, the script ...

javascriptphpjqueryhtmlajax

Is there a way to identify the specific button that was clicked within an Angular Material dialog?

import {Component, Inject} from '@angular/core'; import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material'; /** * @title Dialog Overview Example with Angular Material */ @Component({ selector: 'dialog-overview-ex ...

javascriptangulartypescriptangular-materialangular-material2

Production environment is not recognizing Next JS environment variables

In the Next.js documentation, it states that you should declare your environment variables in next.config.js under the env key in order to access them at build time: env: { GOOGLE_ANALYTICS_ID: process.env.GOOGLE_ANALYTICS_ID }, While this setup wor ...

reactjsenvironment-variablesnext.js

Unable to display elements from an array in the dropdown menu generated by v-for

Having just started learning Vue.js, I am facing a challenge in rendering the following array: countries: ["US", "UK", "EU" ] I want to display this array in a select menu: <select> <option disabled value="">Your Country</option& ...

javascriptvue.js

Ways to distinguish XmlHttpRequest Access-Control-Allow-Origin issues from regular network errors

When making an ajax request, there is a possibility of encountering an error, indicating a failure to establish communication with the intended target (no status code returned). To handle these errors, you can use the following code: var oXhr = new XMLHt ...

javascriptajax

Enhance the Error class in Typescript

I have been attempting to create a custom error using my "CustomError" class to be displayed in the console instead of the generic "Error", without any success: class CustomError extends Error { constructor(message: string) { super(`Lorem "${me ...

javascripttypescript

As I go through the database, I notice that my div model functions correctly for the initial record but does not work for any subsequent ones

I came across a model on w3 schools that fits my requirements, but I am facing an issue where the model only works for the first result when looping through my database. It's likely related to the JavaScript code, but I lack experience in this area. C ...

javascriptphphtmlcssloops

Troubleshooting RoutePropagator in the Shopify App with Next.js

Struggling to enable route propagation in a Nextjs Shopify app? Currently working on a Shopify App created with the CLI and encountering routing issues with the Nextjs router. The standard embedded app setup does not update the URL, so the solution lies i ...

reactjsnext.jsshopifyshopify-app

Tips on how to dynamically update information with Angular

Looking to dynamically update data when a user selects an option from a dropdown menu using the Angular framework This is what I currently have: <div> <button type="button"> {{tests[0].test}} </button> <ul c ...

javascripthtmlangularjs

display the HTML form when the page is clicked

Trying to implement an onclick method for selecting form types. I have multiple form types available - example here Clicking on one submenu should open up the desired form type directly below the menu How can I dynamically load a form based on the select ...

javascriptphpjqueryhtmlforms

What could be the reason for my array parameter not being included in the POST request

When working on my laravel 5.7 / jquery 3 app, I encountered an issue while trying to save an array of data. After submitting the form, I noticed that only the _token parameter is being sent in the POST request as seen in the browser console: let todos_co ...

javascriptjquery

A guide on seamlessly incorporating FlotJs functionalities into a ReactJs application

Having trouble integrating Flot charts into React due to a '$.plot' is not a function error. Here's the code I'm using: Script tags Index.html <script src="dist/libs/js/jquery.min.js"></script> <script src="dist/libs/js ...

javascriptjqueryreactjsflot

Can we achieve live map updates in real time using Google API with Node.js technology?

Can Google Maps API in conjunction with Node.js provide truly real-time updates on a map without any callback limits, or does Google enforce restrictions such as a 5 second or 30 second time frame? Node.js is known for its ability to handle almost real-ti ...

javascriptnode.jsgoogle-mapsmeteorjavascript-framework

When it comes to HTML and Javascript drawing, getting the positioning just right can be a challenge

I'm currently developing a control website for a drawing robot as part of a school project. However, I've been facing some challenges with the functionality of the drawing feature. Though I admit that the site lacks attention to detail, my main ...

javascripthtmlcsshtml5-canvas

Overrule the child element selector using a class identifier

I'm facing an issue where the descendant selector is overriding my .red_p class. Is there a way to prevent this from happening without having to assign a class to each p element individually? HTML: <html> <head> <style> ...

htmlcss

The 'component' property is not found in the 'IntrinsicAttributes' type in this context

I am facing an issue with a component that is not compiling properly: export default function MobileNav({routes, currentRouteIndex, handlePressedRoutedIndex}: MobileNavProp) { ... return ( <React.Fragment> ... ...

reactjstypescriptmaterial-ui

The requested resource at http://localhost/Grafica/%7Bd.icon%7D/ was not found (Error 404)

Creating a tooltip in a weather chart, I want to display an image of the sky condition. Below is the HTML code: <div id="tooltip"> <table class="table table-condensed"> <tr><th>Time (local)</th><th data-text="d ...

javascripthtml

Adjusting Table Width with Bootstrap Styling

https://i.sstatic.net/MIkw0.png Could someone please advise on how to adjust the width of the Bootstrap HTML table above? It appears to be spreading out across the entire browser screen. Thank you. # in this section, I inserted bootstrap into my html tab ...

htmlcsstwitter-bootstrapbootstrap-4