How do I put the clear icon on the card on the top right side of the card overlapping it.
What is the proper way to do it?
CLICK HERE = CODESANDBOX
<Paper
sx={{
padding: "1em",
background: "black"
}}
>
<IconButton color="error" aria-label="add to shopping cart">
<ClearIcon />
</IconButton>
<Grid
component="div"
container
spacing={2}
sx={{
marginBottom: "1em"
}}
>
<Grid component="div" item sm={12}>
<Alert>SUCCESS</Alert>
</Grid>
</Grid>
</Paper>;
Try this:
<Paper
sx={{
padding: "1em",
background: "black",
position: "relative"
}}
>
<IconButton
sx={{
position: "absolute",
top: "-15px",
right: "-15px",
// not necessary, just added this coz it looks weird
background: "white"
}}
color="error"
aria-label="add to shopping cart"
>
<ClearIcon />
</IconButton>
<Grid
component="div"
container
spacing={2}
sx={{
marginBottom: "1em"
}}
>
<Grid component="div" item sm={12}>
<Alert>SUCCESS</Alert>
</Grid>
</Grid>
</Paper>
What I did is simple, make the Paper position relative, then make the icon button absolute.
This way the button will follow whenever you move/animate the Paper.
The outcome would be something like this: https://wphyd.csb.app/
Related
I am very new to material UI, typescript, and react, so if I say something incorrect or use the wrong terminology please correct me. I have 4 boxes that I want to place on a page, but three boxes have to go in a row and stacking the 4th on the bottom of the box 1.
I currently have a grid as a parent that holds these boxes together as shown
<Grid container={true} spacing={1} justifyContent="center" alignItems='flex-start'>
<Box sx={{m: 1}} style={{width: '500px', height: '600px'}}>
<SomeData data={defaultDeploymentFrequencyData}/>
</Box>
<Box sx={{m: 1}} style={{width: '500px', height: '600px'}}>
<SomeData data={defaultDeploymentFrequencyData}/>
</Box>
<Box sx={{m: 1}} style={{width: '500px', height: '600px'}}>
<SomeData data={defaultDeploymentFrequencyData}/>
</Box>
<Box sx={{m: 1}} style={{width: '500px', height: '600px'}}>
<SomeData data={defaultDeploymentFrequencyData}/>
</Box>
</Grid>
Instead of using boxes all the time and editing them there, is there a way that i can call a method so that it aligns them correctly
export const BoxLayout = ():JSX.Element => {
return (
<Box>
sx={{
display: 'grid',
gap: 1,
gridTemplateColumns: 'repeat(2, 1fr)',
}}
</Box>
)
}
I am thinking this could be called when laying out the boxes, maybe like
<Grid container={true} spacing={1} justifyContent="center" alignItems='flex-start'>
<BoxLayout>
<SomeData data={defaultDeploymentFrequencyData}/>
<SomeData data={defaultDeploymentFrequencyData}/>
<SomeData data={defaultDeploymentFrequencyData}/>
<SomeData data={defaultDeploymentFrequencyData}/>
<BoxLayout>
</Grid>
You also need to wrap each Box inside <Grid item> component.
<Grid container spacing={1}>
<Grid item xs={4}>
<Box style={{ width: 50, height: 50}}>Box</Box>
</Grid>
<Grid item xs={4}>
<Box style={{ width: 50, height: 50}}>Box</Box>
</Grid>
<Grid item xs={4}>
<Box style={{ width: 50, height: 50}}>Box</Box>
</Grid>
<Grid item xs={4}>
<Box style={{ width: 50, height: 50}}>Box</Box>
</Grid>
</Grid>
Column widths are integer values between 1 and 12; they apply at any breakpoint and indicate how many columns are occupied by the component.
So by saying xs={4} you mean this box occupies 4/12 of the space or one third. Then last box goes to the next line under the first box.
I'm trying to figure out a layout using MUI Gridv2. The grid will consist of two columns both having equal heights, dependent on what content is in them. The second column has an inner grid consisting of two row items.
I have found a couple of examples on how to do something similar, however, they are using Mui Box and Mui Grid version 1 and act a little different with wrapping(Box) and element types(Gridv1).
Here is what I have so far:
<Gridv2 container xs={6} spacing={{ xs: 1 }} sx={{ flexGrow: 1 }}>
<Gridv2 container xs={12} sx={{ backgroundColor: "yellow" }} flexGrow={1}>
<Gridv2 md={12} lg={6} xl={8}>
<Item elevation={2} sx={{ backgroundColor: "#476485" }}>
<FormLabel component="legend">
Designation{" "}
<Tooltip title="Select a Service Type">
<IconButton size="small" sx={{ padding: 0 }}>
<MenuOpenIcon />
</IconButton>
</Tooltip>
</FormLabel>
is this it is this it is this it is this it is this it is this it is
this it is this it is this it is this it is this it is this it is
this it is this it is this it is this it is this it is this it is
this it is this it is this it is this it is this it is this it is
this it is this it is this it is this it is this it is this it is
this it is this it is this it is this it is this it
</Item>
</Gridv2>
<Gridv2 md={12} lg={6} xl={4}>
<Item elevation={2} sx={{ backgroundColor: "#476485", marginBottom: '8px' }}>
<FormLabel component="legend">
Points of Interest{" "}
<Tooltip title="Add a Point of Interest">
<IconButton size="small" sx={{ padding: 0 }}>
<AddLocationAltOutlinedIcon />
</IconButton>
</Tooltip>
</FormLabel>
is this it is this it is this it is this it is this it is this it is
this it is this it is this it is this it is this it is this it is
this it is this it
</Item>
<Item elevation={2} sx={{ backgroundColor: "#476485", marginTop: '8px' }}>
<FormLabel component="legend">
Extra Contact List{" "}
<Tooltip title="Add a Contact">
<IconButton size="small" sx={{ padding: 0 }}>
<AddIcCallOutlinedIcon />
</IconButton>
</Tooltip>
</FormLabel>
is this it is this it is this it is this it is this it is this it is
this it is this it is this it is this it is this it is this it is
this it is this it is this it is this it is this it is this it is
this it is this it is this it is this it is this it is this it is
this it is this it is this it is this it
</Item>
</Gridv2>
</Gridv2>
</Gridv2>
CodeSandbox Example You can see by dragging between large and medium screens how the largest height can swap from one column to the other.
From the image above, what I would like is if the second column is larger than the first, expand the first column and vice versa.
I want the Box content on the right (Textfields, etc.) as shown in the image below to be always centered even in responsive,
I tried justifyContent="center" in <Box > but nothing happened it didn't move at all also tried justifyContent="center" in <Stack > also nothing happened, I'm not sure if I missed something or there is another way to do it!!
Some help would be appreciated.
The code:
return (
<div className="login">
<Box>
<Stack direction="row"
// spacing={1} >
{/* FIRST BOX ON THE LEFT WITH THE IMAGE & LOGO */}
<Box sx={{
width: "40%",
height: "100%",
backgroundColor: '#3AAFA9',
display: {xs: "none", md: "none", sm: "none", lg:"block"},
}}
>
{/* TO HOLD IMAGE, LOGO & DISCRIPTION */}
<Stack direction="column"
spacing={-2}
sx={{ display: 'block' }}
py={10}
ml={7}>
{/* STUFF */}
</Stack>
</Box>
{/* HERE WHERE THE PROBLEM IS*/}
<Box component="div"
// sx= {{
// padding:{ xs: 2, sm: 4, md: 4, lg:10 },
// }}
justifyContent= "center">
<Stack
direction='column'
width="100%"
justifyContent="flex-start"
// sx={{ ml: 10 }}
>
<Typography variant="h5"
gutterBottom
component="span"
style={{ fontWeight: 600, textAlign: 'left' }}
>
Login to
</Typography>
<Divider style={{width:'100%'}}>
Or
</Divider>
{/* LOGIN FORM */}
<form className="loginForm" onSubmit={handleSubmit}>
</form>
{/* LOGIN FORM ENDS */}
</Stack>
</Box>
</Stack>
</Box>
</div>
)
The Box-Component of Mui dont have a prop justifyContent.
You have to declare it inside youre sx.
sx={{
display: "flex",
justifyContent: "space-between",
width: "100%",
//...
}}
The width is just to say the box it have to use the hole space.
Cheers
I ran into a problem on Safari browser where my Material UI Grid container does not hold its Grid item elements within it's boundaries. This seems to be a problem only for Safari browsers.
And here is my code for the page.
<Grid
item
container
direction="column"
justify="space-between"
className={classes.questionContainer}
>
<Grid item>
<Typography component="h1" variant="h1">
{question.text}
</Typography>
</Grid>
<Grid
item
container
xs={12}
justify="flex-start"
className={classes.btnBlock}
>
<Grid item xs={3} className={classes.btnContainer}>
<Button
variant="outlined"
color="primary"
className={classes.btn}
>
{customButtonTitle1 || 'Yes'}
</Button>
</Grid>
<Grid item xs={3} className={classes.btnContainer}>
<Button
variant="outlined"
color="primary"
className={classes.btn}
>
{customButtonTitle2 || 'No'}
</Button>
</Grid>
<Grid item xs={3} className={classes.btnContainer}>
<Button
variant="outlined"
color="primary"
className={classes.btn}
>
{customButtonTitle3}
</Button>
</Grid>
</Grid>
</Grid>
const useStyles = makeStyles((theme: Theme) => ({
questionContainer: {
padding: theme.spacing(6, 6),
minHeight: '340px',
},
btnBlock: {
flexBasis: 0,
},
btnContainer: {
marginRight: '12px',
},
btn: {
fontSize: '16px',
lineHeight: '24px',
color: theme.palette.text.secondary,
padding: '10px 0',
width: '100%',
margin: '0 12px',
},
}))
Why is this happening and how can I fix that for Safari and not break for other browser?
Unfortunately, I do not have access to a Mac OS to test it myself properly
Can you try remove "item" in your Grid container?
<Grid
container
direction="column"
justify="space-between"
className={classes.questionContainer}
>
Currently using MUI grid system, and I am by no means an expert. I have currently have a grid that looks like this by default on you typical screen
if you make the screen a bit smaller all the way up until 600px the grid becomes mashed and looks kinda wonky like this
Once you get below 600 px the grid finally stacks like this
and I would like this desired effect to happen way before like around 900 px is there a way to achieve this??? Ive tried almost everything but the grid won't stack like i would like in the last picture. My grid is as follows:
<Grid
container
spacing={2}
className={classes.grid}
alignItems='center'
>
<Grid
item
sm={6}
xs={12}
className={classes.grid}
style={{ marginBottom: 20 }}
>
<Img
placeholder={BarhopPlace}
src={BarHop}
alt='barhop'
cache={false}
className={classes.image}
/>
</Grid>
<Grid
item
sm={6}
xs={12}
className={classes.grid}
style={{ width: "100%", textAlign: "center", padding: 0 }}
>
<Container
component='main'
maxWidth='xs'
style={{
marginBottom: 20,
visibility: ready ? "visible" : "hidden",
}}
>
<Typography
variant='h5'
variant='h5'
style={{ marginBottom: 10 }}
>
Bar Hop
</Typography>
<Typography variant='body2'>
A platform that provides users with the top drinking places
based on their location. Technologies used: ReactJS, NodeJS,
JavaScript, and the Yelp API .
</Typography>
<br />
<Box className={classes.alumniChips}>
<Tooltip
title='Please Note: Hosted on free tier of Heroku, site takes a few minutes to load'
aria-label='add'
>
<a
rel='noopener noreferrer'
href='https://barhop-wyncode.herokuapp.com/'
target='_blank'
style={{ margin: "1%" }}
>
<Chip
icon={<LanguageIcon />}
label='View Site'
clickable
color='primary'
/>
</a>
</Tooltip>
<a
rel='noopener noreferrer'
href='https://github.com/Rterrell25/Bar_Hop_React_App'
target='_blank'
style={{ margin: "1%" }}
>
<Chip
icon={<GitHubIcon />}
label='View Code'
clickable
color='primary'
/>
</a>
<BarHopModal />
</Box>
</Container>
</Grid>
<br />
<Divider style={{ width: "100%" }} />
<br />
<Grid
item
sm={6}
xs={12}
className={classes.grid}
style={{ marginTop: 20, marginBottom: 20 }}
>
<Img
placeholder={OddjobsPlace}
src={Oddjobs}
alt='oddjobs'
cache={false}
className={classes.image}
/>
</Grid>
<Grid
item
sm={6}
xs={12}
className={classes.grid}
style={{ width: "100%", textAlign: "center", padding: 0 }}
>
<Container
component='main'
maxWidth='xs'
style={{
marginBottom: 20,
visibility: ready ? "visible" : "hidden",
}}
>
<Typography
variant='h5'
variant='h5'
style={{ marginBottom: 10 }}
>
Odd Jobs
</Typography>
<Typography variant='body2'>
A platform that pairs consumers with reliable contractors.
Technologies used: ReactJS, Ruby on Rails, PostgreSQL, Calendly
Integration and Google Maps API.
</Typography>
<br />
<Box className={classes.alumniChips}>
<Tooltip
title='Please Note: Hosted on free tier of Heroku, site takes a few minutes to load'
aria-label='add'
>
<a
rel='noopener noreferrer'
href='https://oddjobs-react.herokuapp.com/'
target='_blank'
style={{ margin: "1%" }}
>
<Chip
icon={<LanguageIcon />}
label='View Site'
clickable
color='primary'
/>
</a>
</Tooltip>
<a
rel='noopener noreferrer'
href='https://github.com/Rterrell25/Oddjobs_React_App'
target='_blank'
style={{ margin: "1%" }}
>
<Chip
icon={<GitHubIcon />}
label='View Code'
clickable
color='primary'
/>
</a>
<OddjobsModal />
</Box>
</Container>
</Grid>
<br />
<Divider style={{ width: "100%" }} />
<br />
<Grid
item
sm={6}
xs={12}
className={classes.grid}
style={{ marginTop: 20 }}
>
<Img
placeholder={JobTrackerPlace}
src={JobTracker}
cache={false}
alt='JobTracker'
className={classes.image}
/>
</Grid>
<Grid
item
sm={6}
xs={12}
className={classes.grid}
style={{ width: "100%", textAlign: "center", padding: 0 }}
>
<Container
component='main'
maxWidth='xs'
style={{
marginBottom: 20,
visibility: ready ? "visible" : "hidden",
}}
>
<Typography variant='h5' style={{ marginBottom: 10 }}>
JobTracker
</Typography>
<Typography variant='body2'>
A platform that allows recent graduates from Wyncode Academy to
track job applications, store resume's, and monitor follow ups.
Technologies used: ReactJS, NodeJS, Google Cloud Functions, and
Google Firestore.
</Typography>
<br />
<Box className={classes.alumniChips}>
<a
rel='noopener noreferrer'
href='https://jobtracker.netlify.app/'
target='_blank'
style={{ margin: "1%" }}
>
<Chip
icon={<LanguageIcon />}
label='View Site'
clickable
color='primary'
/>
</a>
<a
rel='noopener noreferrer'
href='https://github.com/Rterrell25/JobTracker_Client'
target='_blank'
style={{ margin: "1%" }}
>
<Chip
icon={<GitHubIcon />}
label='View Code'
clickable
color='primary'
/>
</a>
<JobTrackerModal />
</Box>
</Container>
</Grid>
</Grid>
Sorry for the long post!! Thanks!
All you should need to do is change sm={6} to md={6} (see https://material-ui.com/customization/breakpoints/#breakpoints). sm is 600px and up, md is 960px and up. Then your items will be full-width (12 columns) from 0px (xs) up till 960px (md).