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;
}