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>
</>
);
};
Related
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.
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 am new to react and was using material ui. I was trying to place a card in a grid item.
here is my code:
<GridItem xs={12} sm={12} md={12} style={{ margin: "0rem" }}>
<Card style={{ margin: "0rem" }}>
<GridItem xs={2} sm={2} md={2}>
{/* <Card style={{ margin: "0rem" }}> */}
<GridItem xs={12} style={{ margin: "0rem" }}>
<CustomOutlineInput
style={{ margin: "0rem" }}
id="coilID"
label="Coil ID"
variant="outlined"
size="small"
/>
</GridItem>
{/* </Card> */}
</GridItem>
</Card>
</GridItem>;
However as you can see some extra spacing is generated in this way how do I remove this and make colums inside the grid item:
Also how do I add text boxes in a single row without increasing the spacing?
each element is taking extra space:
I am using three child components in my parent that is m show under according to when I click in Accordion this child component re-render again and again when I click because of this Accordion get slow to open take time because some time data will come in a large amount I have tow child component like this and my data is not getting change I have already stored in some state before coming in this Accordion section
import React from 'react'
import {
Box,
makeStyles,
Typography,
Paper,
Grid,
Card,
CardContent,
} from "#material-ui/core";
function childComponent({data, title, classes}) {
console.log("child rerender dataChnage")
const Memodata = React.useMemo(() => {
return data
},[data]);
return (
<>
<Box mt={2}>
<Typography variant="subtitle2" noWrap={true}>
<Box fontWeight="fontWeightBold">{title}</Box>
</Typography>
</Box>
{Memodata?.map((row, rowIndex) => {
return (
<>
{Memodata?.length !== 0 ? (
<Card className={classes.cardSpace} variant="outlined">
<CardContent>
<Grid xs={12} item container spacing={2}>
<Grid item xs={12} sm={3}>
<Typography variant="subtitle2">
<Box fontWeight="fontWeightBold" component="span" mr={1}>
name :
</Box>
{row.SRN}
</Typography>
</Grid>
<Grid item xs={12} sm={3}>
<Typography variant="subtitle2">
<Box fontWeight="fontWeightBold" component="span" mr={1}>
ID :
</Box>
{row.CHARGE_ID ? row.CHARGE_ID : "N/A"}
</Typography>
</Grid>
<Grid item xs={12} sm={6}>
<Typography variant="subtitle2">
<Box fontWeight="fontWeightBold" component="span" mr={1}>
Holder :
</Box>
{row.CHARGE_HOLDER ? row.CHARGE_HOLDER : "N/A"}
</Typography>
</Grid>
<Grid item xs={12} sm={3}>
<Typography variant="subtitle2">
<Box fontWeight="fontWeightBold" component="span" mr={1}>
Date Create :
</Box>
{row.DATE_CREATE ? row.DATE_CREATE : "N/A"}
</Typography>
</Grid>
<Grid item xs={12} sm={3}>
<Typography variant="subtitle2">
<Box fontWeight="fontWeightBold" component="span" mr={1}>
Date Modified :
</Box>
{row.DATE_MODIFIED ? row.DATE_MODIFIED : "N/A"}
</Typography>
</Grid>
<Grid item xs={12} sm={3}>
<Typography variant="subtitle2">
<Box fontWeight="fontWeightBold" component="span" mr={1}>
Date Satisfied :
</Box>
{row.DATE_SATISFIED ? row.DATE_SATISFIED : "N/A"}
</Typography>
</Grid>
<Grid item xs={12} sm={3}>
<Typography variant="subtitle2">
<Box fontWeight="fontWeightBold" component="span" mr={1}>
Amount :
</Box>
{row.AMOUNT ? row.AMOUNT : "N/A"}
</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant="subtitle2">
<Box fontWeight="fontWeightBold" component="span" mr={1}>
Address :
</Box>
{row.ADDRESS ? row.ADDRESS : "N/A"}
</Typography>
</Grid>
</Grid>
</CardContent>
</Card>
) : (
<Typography variant="subtitle2">No Data Available.</Typography>
)}
</>
);
})}
</>
)
}
export default React.memo(childComponent);
Passing data in the child component
{MemoUserHistorySummary?.masterData?.map((row, i) => {
return (
<Accordion
expanded={expanded === i}
onChange={handleChange(i)}
elevation={0}
className={classes.bgColor}
>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1bh-content"
id="panel1bh-header"
>
<Grid container direction="row">
<Grid item xs={12} md={6}>
<Grid item xs={12}>
<Box display="flex">
<Grid item xs={8} sm={4} md={3}>
<Box overflow="hidden" width="100%">
<Typography component={"div"} variant="subtitle">
<Box
fontWeight="fontWeightBold"
overflow="hidden"
whiteSpace="nowrap"
textOverflow="ellipsis"
>
Name :
</Box>
</Typography>
</Box>
</Grid>
<Grid item xs={9} sm={8} md={9}>
<Typography component={"div"} variant="subtitle">
{row.NAME}
</Typography>
</Grid>
</Box>
<Grid item xs={12}>
<Typography variant="subtitle">
<Box display="flex" flexWrap="wrap">
<Box mr={1} fontWeight="fontWeightBold">
ID :
</Box>
{row.ID}
</Box>
</Typography>
</Grid>
</Grid>
</Grid>
<Grid container item xs={12} md={6}>
<Grid item xs={2}>
<Box overflow="hidden" width="100%">
<Typography component={"div"} variant="subtitle">
<Box
fontWeight="fontWeightBold"
overflow="hidden"
whiteSpace="nowrap"
textOverflow="ellipsis"
>
Address :
</Box>
</Typography>
</Box>
</Grid>
<Grid item xs={10}>
<Box display="flex">
<Typography
component={"div"}
variant="subtitle"
title={row.REGISTERED_OFFICE_ADDRESS}
>
{row.REGISTERED_OFFICE_ADDRESS.slice(0, 110)}
</Typography>
</Box>
</Grid>
</Grid>
</Grid>
</AccordionSummary>
<AccordionDetails>
<Grid item xs={12}>
<DetailsCards
companyName="Name"
row={row}
mainDetailData={corporateCells}
show={show}
setShow={setShow}
/>
<DownloadsChargesCard
data={MemoUserHistorySummary?.charges}
title={"Charges Registered"}
cells={chargesCells}
classes={classes}
/>
<DownloadDiractorCard
data={MemoUserHistorySummary?.directors_history}
title={"Directors List"}
cells={signatoriesCells}
classes={classes}
/>
</Grid>
</AccordionDetails>
</Accordion>
);
})}
You basically need to implement shouldComponentUpdate() on the children components and have it return false when the state or prop that causes the parent accordion to expand is the only value in nextProps or nextState (depending how you are controlling your accordion, which I couldn't tell from your code sample).
The footer looks too big and almost takes up most of the screen especially when it is for smaller devices. How can I decrease the height of this footer so it won't look too big for large and small screens.
import { Container, Box, Grid } from "#material-ui/core";
const Footer = (props) => {
return (
<footer>
<Box
px={{ xs: 3, sm: 10 }}
py={{ xs: 5, sm: 10 }}
// bgcolor="text.secondary"
// color="white"
color="text.secondary"
bgcolor="#E3F2FD"
>
<Container maxWidth="lg">
<Grid container spacing={5}>
<Grid item xs={12} sm={4}>
<Box borderBottom={1}>Help</Box>
<Box>Contactt</Box>
<Box>Support</Box>
<Box>Privacy</Box>
</Grid>
<Grid item xs={12} sm={4}>
<Box borderBottom={1}>Help</Box>
<Box>Contactt</Box>
<Box>Support</Box>
<Box>Privacy</Box>
</Grid>
<Grid item xs={12} sm={4}>
<Box borderBottom={1}>Help</Box>
<Box>Contactt</Box>
<Box>Support</Box>
<Box>Privacy</Box>
</Grid>
</Grid>
{/* change name of the website here */}
<Box textAlign="center" pt={{ xs: 5, sm: 10 }} pb={{ xs: 5, sm: 0 }}>
Website ® {new Date().getFullYear()}
</Box>
</Container>
</Box>
</footer>
);
};
export default Footer;
This is the codesandbox for this footer - https://codesandbox.io/s/nameless-frog-ros09?file=/src/App.js
I think the big padding comes from the px and py props in the Box component.
From here https://material-ui.com/system/spacing/, we can see that px is horizontal padding (padding-left and padding-right) also py is vertical padding (padding-top and padding-bottom).
From here https://material-ui.com/customization/spacing/, we can see that the default padding for Material UI is 8 px for spacing = 1.
From here https://material-ui.com/customization/breakpoints/, we can see taht xs is extra small screen and sm is small screen.
So, px={{ xs: 3, sm: 10 }} means that the padding left and right are both 3 * 8 px = 24 px for extra small screen and padding left and right are both 10 * 8 px = 80 px for small screen or above (because no md, lg, and xl are defined in the code).
Here is the screenshot if you comment the px and py props in the Box component.
return (
<Box
// px={{ xs: 3, sm: 10 }}
// py={{ xs: 5, sm: 10 }}
// bgcolor="text.secondary"
// color="white"
color="text.secondary"
bgcolor="#E3F2FD"
>
<Container maxWidth="lg">
<Grid container spacing={2}>
<Grid item xs={12} sm={4}>
<Box borderBottom={1}>Help</Box>
<Box>Contactt</Box>
<Box>Support</Box>
<Box>Privacy</Box>
</Grid>
<Grid item xs={12} sm={4}>
<Box borderBottom={1}>Help</Box>
<Box>Contactt</Box>
<Box>Support</Box>
<Box>Privacy</Box>
</Grid>
<Grid item xs={12} sm={4}>
<Box borderBottom={1}>Help</Box>
<Box>Contactt</Box>
<Box>Support</Box>
<Box>Privacy</Box>
</Grid>
</Grid>
{/* change name of the website here */}
<Box textAlign="center" pt={{ xs: 5, sm: 10 }} pb={{ xs: 5, sm: 0 }}>
Website ® {new Date().getFullYear()}
</Box>
</Container>
</Box>
)