Tips for customizing image-cropping functionality within a modal with material UI

When it comes to positioning elements on a basic page using CSS, I consider myself decently skilled. However, things get confusing when working inside a modal.

I attempted to use the Dialog component from mui-material to wrap the cropper, but that approach didn't work out as expected. So, I resorted to using the Modal component instead.

My goal is to create something similar to this design which includes only the cropper section, cancel and crop buttons. The buttons should be positioned outside of the cropper with a white background. https://i.stack.imgur.com/QUA59.png

While my modal is functional, its appearance isn't quite up to par yet: https://i.stack.imgur.com/SFgAV.png

This is the code snippet:

// Your code goes here...

Here's the corresponding CSS:


.container {
  height: 100vh;
  width: 70vw;
}

.modal_container {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 70%;
  background-color: whitesmoke;
  box-shadow: 24px;
  padding: 4px;
}

.image_container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.cropper{
  background-color: red;
}

.slider {
  height: 10%;
}

.slider_container{
  background: white;
  display:flex;
  justify-content: end;
  align-items: center;
}

.disable_cropper {
  display: none;
}

.button_container {
  position: absolute;
}

Answer №1

When working with DialogContent, consider utilizing the Box component to enhance its visual appeal. Additionally, incorporating the Grid component can greatly improve the overall design.

<Box
                alignItems="center"
                justifyContent="center"
                minHeight={400}
                width={"100%"}
                display="flex"
            > 
<ReactCrop
                    crop={crop}
                    onChange={(_, percentCrop) => setCrop(percentCrop)}
                    onComplete={(c) => setCompletedCrop(c)}
                    aspect={3 / 2}
                    minWidth={100}
                    style={{borderRadius: 12}}
                >
                    <img
                        ref={imgRef}
                        alt="Crop me"
                        src={imgSrc}
                        style={{transform: `scale(${scale}) rotate(${rotate}deg)`, borderRadius: 12}}
                        onLoad={onImageLoad}
                    />
                </ReactCrop>

            </Box>

https://i.stack.imgur.com/d0jjf.jpg

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

Firestore is failing to accept incoming data when the setDoc method is employed

I am encountering an issue with my app's connectivity to the Firestore database when attempting to utilize setDoc. The database is successfully operational for next-auth, creating records as intended. However, the problem arises when trying to enable ...

Characters from Font Awesome are invisible on my screen

I am struggling with the font awesome plugin as I am unable to view the characters. Below is my code snippet: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <l ...

adjust the dimensions of the clickable icon's background

Is there a way to expand the pressable area of a close icon without altering its size? For example, if the icon is 19X19 pixels, can the pressable area be increased to 39X39 pixels? The concern lies with the div element containing the close button and the ...

Tips for stopping a flex:1 div from expanding to accommodate its abundant content

I'm facing a situation where I need to create two columns, one fixed at 150px and the other filling up the remaining space with scroll functionality for overflow content. Despite trying to use flexbox for this layout, the second column keeps expanding ...

Can Chrome support color management for css colors?

In my current project, we are dealing with designers who work in Adobe RGB and are accustomed to viewing the vibrant colors from that spectrum in Illustrator. However, we are developing an application that will enable them to work in a web browser using a ...

How to retrieve the page URL or hostname within a NextJs Project?

How can I retrieve the complete URL or website hostname on a Static Site Generator similar to the image below? I attempted using window.location.hostname, but unfortunately, it did not yield results. The error message displayed was: window not defined. ...

How can I evenly distribute three list items on a PhoneGap webpage using CSS?

My goal is to create a PhoneGap app with a main menu featuring a title and three buttons. Here is the layout: <body> <div class="app"> <div class="headerOne"> <h1></h1> </d ...

Ways to create a looping mechanism with specified number restrictions and limitations

Can anyone assist me with this problem? I am looking to create a "looping" effect similar to the image provided. What is the logic behind this repetition? Thank you in advance for your help! Here is an example output: ...

When using the react-query library, the useQuery hook may not always return a defined value, leading

Experimenting with reactQuery in a demo app showcased in this repository. The app interacts with a mock API found here. Encountering an issue using the useQuery hook to call the following function in the product API file: export const getAllProducts = asy ...

What is the method for altering the color of just the text in an anchor link?

Here is the code snippet I’m working with: <a href="#" title="some title"> <span>Do not change color of this text</span> Want to only change this text color </a> I am trying to change the color of the anchor tag text only, w ...

Is there a way to use CSS animation and transform to create a flip effect on two different divs, flipping them up and then back down with pauses and looping in between?

I have a query about CSS animation and transform. I am looking to create a flipping effect on two divs - one flips up from the bottom, then back down, followed by the second div flipping up and back down. I want this sequence to repeat indefinitely with pa ...

I am looking to modify the background of the global style within the Chakra theme.ts file using props in React

Is it possible to set different background colors for each page on a website? I would like the background color of pageA to be white and pageB to be gray. Currently, I have set the background color in the global style using Chakra UI, but I want to b ...

What is the method for including an unclosed JSX element?

I'm working on simplifying this code snippet: {props.href && ( <Link href={props.href}> <button> {props.children} </button> </Link> )} {!props.href && ( <button> ...

Including a hyperlink button within a Kendo Grid cell that is editable

I have a grid featuring a column for editable phone numbers. I want to include a small icon that users can click on to trigger a "tel: link" which will prompt their phone hardware to act accordingly. For a demo, check out this link -> Objective: Clic ...

Extract table information from MuiDataTable

I am having trouble retrieving the row data from MuiDataTable. When I try to set the index from the onRowSelectionChange function to a state, it causes my checkbox animation to stop working. Below is how my options are currently configured: const option ...

Reloading issue with NextJs when utilizing next-i18next for translations on a specific

Having trouble with next-i18next in my app. Implemented everything correctly, but the layout keeps rerendering on pages with getStaticProps. Need to find a way to prevent this. Created a file named withStaticTranslations.ts for pages, but when trying to l ...

containerCreation() Unable to find object with specified ID

I am in the process of developing a tic-tac-toe game using Meteor and React. Upon launching the app, I initiate a new item creation in the 'Games' collection and then pass along the ID of this object to the App as a prop: Meteor.startup(() => ...

The requested method in NEXT.js 14 is not permitted

I attempted to set up a basic post API in my NEXT.js 14 application with app routing. Here is the code I used: API call: useEffect(() => { const testFunc = async () => { const response = await fetch("http://localhost:3000/helpers/ed ...

Understanding the status of a modal: When it's open, when it's closed - decy

When using the MUI Modal component, the onClose callback is triggered when the modal begins to close. However, there is an animation with a delay before the modal actually closes. I am looking for a way to execute a callback after the animation has finis ...

Is it permissible to use DEFER or ASYNC when including a stylesheet?

I am curious if script files are able to utilize the DEFER and ASYNC keywords on a resource include. Are these keywords also compatible with stylesheet (CSS) includes? The syntax I imagine would be: <link rel="stylesheet" type="text/css" href="./path/ ...