Hi I am trying to centre a card within a cred however its looking like this and Im not too sure why. I coloured the grid background red and blue to make it easier to see.
Any help would be amazing.
Here is my code:
</Typography>
<Grid
container
spacing={2}
direction="row"
alignItems="center"
justifyContent="center"
>
<Grid
item
xs={3}
style={{ backgroundColor: "red" }}
alignItems="center"
>
<CardContent style={{ backgroundColor: "white" }}>
<Typography
sx={{ fontSize: 14 }}
color="text.secondary"
gutterBottom
>
Word of the Day
</Typography>
<Typography variant="h5" component="div">
Hello
</Typography>
<Typography sx={{ mb: 1.5 }} color="text.secondary">
adjective
</Typography>
<Typography variant="body2">
well meaning and kindly.
<br />
{'"a benevolent smile"'}
</Typography>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Grid>
<Grid item xs={3} style={{ backgroundColor: "blue" }}>
{" "}
<h3> Orders</h3>
<Typography variant="h4" component="h1">
{ordersCount}
</Typography>
</Grid>
</Grid>
And here is what it looks like:
Current code output
This is the desired design
Try to change the Grid like this:
<Grid
container
spacing={2}
direction="row"
alignItems="center"
// justifyContent is removed
>
Because justifyContent is placing your Grid at the center of the screen.
Related
How can i make the description responsive, like going to the next line? It's not going to the next line instead it extends horizontally. I can easily fix this if I use textField but I need to adjust the padding and the outline of it, is there any other way?
<Container maxWidth="lg">
<Grid container spacing={2}>
<Grid item xs={12} md={4}>
<Box sx={{height: {xs: 150, md: 300}, width: '300px', border:1, padding: '20px', borderRadius: '10px', display: {xs: 'flex'}}}>
<Box component="img" sx={{height: '100%', width: '100%', objectFit: 'contain'}} src={singleProduct.img}/>
</Box>
</Grid>
<Grid container item xs={12} md={8}>
<Box sx={{display:'flex', flexDirection: 'column', margin:'auto'}}>
<Typography variant="h5" sx={{fontWeight: 'bold', textTransform: 'uppercase'}}> {singleProduct.title}</Typography>
<Box sx={{height: '40px', width: '100%', paddingY: '40px',paddingX: '20px', display:'flex', alignItems:'center', borderBottom: 1}}>
<Typography variant='h3' sx={{color: '#00c853', fontWeight: 800}}> ₱ {singleProduct.price}.00</Typography>
</Box>
<Grid sx={{width: 500}} container spacing={2} pt={4}>
<Grid item xs={4} sx={{lineHeight: 2}}>
<Typography variant="body1" fontWeight={600} color="#757575">Seller: </Typography>
<Typography variant="body1" fontWeight={600} color="#757575">StudentID: </Typography>
<Typography variant="body1" fontWeight={600} color="#757575">Dept: </Typography>
<Typography variant="body1" fontWeight={600} color="#757575">Desc: </Typography>
</Grid>
<Grid item xs={8}>
<Typography variant="body1" fontWeight={700} color="#212121">John Doe</Typography>
<Typography variant="body1" fontWeight={700} color="#212121">{singleProduct.seller_id?.studentId}</Typography>
<Typography variant="body1" fontWeight={700} color="#212121">{singleProduct.seller_id?.department}</Typography>
<Typography variant="body1" fontWeight={700} color="#212121">{singleProduct.description}</Typography>
</Grid>
</Grid>
</Container>
Try this
<Grid item xs={8} zeroMinWidth>
<Typography variant="body1" fontWeight={700} color="#212121">John Doe</Typography>
<Typography variant="body1" fontWeight={700} color="#212121">{singleProduct.seller_id?.studentId}</Typography>
<Typography variant="body1" fontWeight={700} color="#212121">{singleProduct.seller_id?.department}</Typography>
<Typography variant="body1" fontWeight={700} color="#212121" style={{overflowWrap: 'break-word'}}>{singleProduct.description}</Typography>
</Grid>
try adding these properties to Typography'styles :
{
max-width:700px;
white-space: normal;
}
Below is react code made with MUI. The aim is to create a Card that displays Character Information.
const CharacterPreview = ({ characterKey }: CharacterPreviewProps) => {
return (
<Card sx={{ maxWidth: 256, borderRadius: 4 }}>
<Box
component="a"
href={`/#/${characterKey}`}
display="flex"
position="relative"
sx={{
"&::before": {
content: '""',
display: "block",
position: "absolute",
left: 0,
top: 0,
width: "100%",
height: "100%",
opacity: 0.7,
backgroundImage: `url(${bannerImgUrl})`,
backgroundPosition: "center",
backgroundSize: "cover",
},
}}
width="100%"
>
<Box
flexShrink={1}
sx={{ maxWidth: { xs: "40%", lg: "40%" } }}
alignSelf="flex-end"
display="flex"
flexDirection="column"
zIndex={1}
>
<Box
component="img"
src={iconImgUrl}
width="100%"
height="auto"
maxWidth={256}
sx={{ mt: "auto" }}
/>
</Box>
</Box>
<CardContent>
<Typography variant="h5" component="div">
{characterName}
</Typography>
{/* <Typography variant="body2" color="text.secondary"> */}
{/* {characterInfo.title as string} */}
{/* </Typography> */}
<Chip
label={characterChipInfo}
size="small"
/>
</CardContent>
</Card>
);
};
This is what the final result looks like:
I want the chip component (reads as CRYO in the image and is characterChipInfo in the above code) to be on the same line as the characterName and be separated like a space-between flexbox, however using the Box component with flex-box and justifyContent="space-between" to encase the name Typography and Chip doesn't work. I've also tried along with it changing the Typography display to inline-flex and inline-block, which makes them on the same line but the Box's justifyContent=space-between doesn't work.
You need to use a Stack component of Material UI like so:
CodeSandBox
<Stack
direction="row"
spacing={2}
justifyContent="space-between"
alignItems="center"
>
<Typography variant="h5" component="div">
{characterName}
</Typography>
{/* <Typography variant="body2" color="text.secondary"> */}
{/* {characterInfo.title as string} */}
{/* </Typography> */}
<Chip
label={characterChipInfo}
size="small"
/>
</Stack>
I have this Grid and Card where I wanted to make it into 4 columns in one row. Currently, the 4th column goes in the 2nd row, like this:
I wanted to put the 4 columns in one row.
Also, if it's on a small screen, why does it look like this? The columns are not arranged.
codesandbox link: https://codesandbox.io/s/4-boxes-in-one-row-0mym3j?file=/demo.js
Codes:
<Container style={{ marginTop: "1rem", marginBottom: "1rem" }}>
<Box sx={{ "& h1": { m: 0 } }}>
<Grid container spacing={2} justify="flex-start">
<Grid item xs={12} sm={6} md={4}>
<Card>
<CardContent>
<Stack direction="row" spacing={2}>
<Typography variant={"h6"} gutterBottom>
Column 1
</Typography>
</Stack>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} sm={6} md={4} order={{ xs: 3, sm: 2 }}>
<Card>
<CardContent>
<Stack direction="row" spacing={2}>
<Typography variant={"h6"} gutterBottom>
Column 2
</Typography>
</Stack>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} sm={6} md={4} order={{ xs: 2, sm: 3 }}>
<Card>
<CardContent>
<Stack direction="row" spacing={2}>
<Typography variant={"h6"} gutterBottom>
Column 3
</Typography>
</Stack>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} sm={6} md={4} order={{ xs: 2, sm: 3 }}>
<Card>
<CardContent>
<Stack direction="row" spacing={2}>
<Typography variant={"h6"} gutterBottom>
Column 4
</Typography>
</Stack>
</CardContent>
</Card>
</Grid>
</Grid>
</Box>
</Container>
So what you have to do to your child Grid is, instead of md={4}, give it md={3} (so for medium and above sized screens all 4 will be in single row). Or if you want md to remain 4 then add another breakpoint of lg={3} for all.
The row has 12 columns so either 3 items of 4 columns each (3*4 =12) or 4 items of 3 columns each. Keep the 12 rule in mind. And on smaller screens it will wrap automatically.
Now sm={6} mean that on small sized screens only 2 items will be in single row and next would wrap. So responsive is working fine. If you want 4 on small screens as well then you have to do sm={3} as well.
So you this line will change:
<Grid item xs={12} sm={6} md={3}> <======== md=3 OR
<Grid item xs={12} sm={6} md={4} lg={3}> <======= lg=3 added and md remain same
I hope your day is going well. I am a new user of material UI and I am working on building my first profile page (image below).
As I am getting closer to building this page, I am struggling to create a grid system that allows the about section to be directly under the three panels (see image below).
How do I remove the padding between the about section and three pannels (code below)?
return (
<>
<Helmet>
<title>Dashboard: Project Details | Material Kit Pro</title>
</Helmet>
<Box
sx={{
backgroundColor: 'background.default',
minHeight: '100%',
py: 8
}}
>
<Container >
<AppBar></AppBar>
<Grid container spacing={1}>
<Grid item xs={12} md={3}>
<Box
style={{ height: '100%', width: '100%'}}
>
<WritersSidePanel />
</Box>
</Grid>
<Grid item xs={12} md={9}>
<WritersPageTopPanel />
</Grid>
<Box style={{ marginDown: '90%'}}>
<Grid item xs={12} container
direction="column"
alignItems="flex-end"
justify="flex-end">
<Box
style={{ width: '75%', height: '100%'}}
>
<AboutSection description={description} />
</Box>
</Grid>
<Grid item xs={12} container
direction="column"
alignItems="flex-end"
justify="flex-end">
<Box
style={{ width: '75%'}}
>
<SampleStory description={description} />
</Box>
</Grid>
</Box>
</Grid>
</Container>
</Box>
</>
);
};
Hello i need to move my grids to display the following layout
However right now my layout looks like this
I am still trying to understand how grid work, below is my attempt at formatting the grid, however it doesn't want to align itself in the manor of which i wish
<Grid item xs={8}>
<Grid className = {classes.root} container direction ="column"
alignItems="flex-start">
{/* <Typography variant="title" style={{ }}>example</Typography> */}
<Paper className = {classes.mainDetailsPaper}>
<Typography variant="title">Main Details</Typography><Divider />
<Typography variant="subheading">Organisation: </Typography>
<Typography variant="subheading">Category: </Typography>
<Typography variant="subheading">Sub Category: </Typography>
</Paper>
</Grid>
<Grid className = {classes.root} container direction ="row"
alignItems="flex-end">
<Paper className = {classes.subDetailsPaper}>
<Typography variant="title">Contract Dates</Typography><Divider />
<Typography variant="subheading">Start Date: </Typography>
</Paper>
<Paper className = {classes.subDetailsPaper}>
<Typography variant="title">Valuation</Typography><Divider />
<Typography variant="subheading">Estimated Contract Value: </Typography>
</Paper>
<Paper className = {classes.subDetailsPaper}>
<Typography variant="title">Supplier Info</Typography><Divider />
</Paper>
</Grid>
</Grid>