I am having trouble displaying my cactus partially above my dialog without it getting cut off when I apply certain styles.
Could someone please point out what I might be doing wrong?
Here are the styles for the cactus:
cactus: {
position: 'absolute',
top: -20,
left: 30,
backgroundColor: '#fff',
width: '60px',
height: '60px',
},
Just to clarify, I am using Material-UI and React for this project.
Here is the full code snippet -
import React, { useState } from 'react';
import {
DialogTitle,
Typography,
IconButton,
Divider,
DialogContent,
Button,
Grid,
TextField,
Collapse,
Avatar,
} from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import Dialog from './Dialog';
import { IoCloseSharp } from 'react-icons/io5';
import Cactus from '../../Assets/cactus.svg';
const CreateBatchDialog = ({ open, close }) => {
const classes = useStyles();
const [test, setTest] = useState(false);
return (
<Dialog open={open} onClose={close} maxWidth="sm">
<Avatar className={classes.cactus}>
<img src={Cactus} alt="cactus" height="50px" width="50px" />
</Avatar>
<DialogTitle>
<div className={classes.header}>
<Typography variant="h5">Join Batch</Typography>
</div>
<IconButton className={classes.close} onClick={close}>
<IoCloseSharp />
</IconButton>
</DialogTitle>
<Divider />
<DialogContent className={classes.content}>
<Grid spacing={2} container>
<Grid item xs={10}>
<TextField fullWidth variant="outlined" placeholder="Batch Name" />
</Grid>
<Grid item xs={2} className={classes.btnContainer}>
<Button
fullWidth
variant="contained"
className={classes.btn}
onClick={() => setTest((prev) => !prev)}
>
Join
</Button>
</Grid>
</Grid>
<Collapse in={test} className={classes.error}>
<Typography align="left">
* Placeholder for any error messages
</Typography>
</Collapse>
</DialogContent>
</Dialog>
);
};
const useStyles = makeStyles({
header: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
close: {
position: 'absolute',
right: 10,
top: 12,
},
content: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: '30px',
},
actions: {
padding: '20px',
},
btn: {
padding: '12px 16px',
borderRadius: 8,
backgroundColor: 'rgba(24, 119, 242, 0.5)',
'&:hover': {
backgroundColor: 'rgba(24, 119, 242, 0.5)',
},
},
btnContainer: {
display: 'flex',
},
error: {
width: '100%',
margin: '20px 0px 0px 0px',
color: 'crimson',
},
cactus: {
position: 'absolute',
top: 0,
left: 30,
backgroundColor: '#fff',
width: '60px',
height: '60px',
},
});
export default CreateBatchDialog;
I have already attempted some solutions, one of which was adding this line:
transform: 'translate(50%, -50%)',
However, the results remained the same as shown in the image above.