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;
}
Related
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>
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 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).
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>
</>
);
};
I am currently mapping material-ui cards that gets information from a JSON object so therefore information within it will vary from time to time and take a different amount of space. I wanted a fixed height for each card which I have accomplished, however, the content is not in line.
A screenshot of how it looks
I have all the cards in rows of three. As you can see the last card's content is not in line with the other 2.
I would like to have the button and graph fixed to the bottom of the card or even having a fixed height for the content above the graphs so the graph and button is in place at the bottom.
I have struggled to no ends to get it to work.
Any help would be very appreciated.
Here is my code:
<Grid key={item.Qid} item xs={12} sm={4}>
<Card className={classes.cards}>
<div className={classes.details}>
<CardContent>
<Typography component="h5" variant="h5" align="center">
Question
</Typography>
<Typography variant="subtitle1" color="textSecondary" align="center" className={classes.space}>
{item.Qid}
</Typography>
<Typography variant="subtitle1" color="textSecondary">
{item.Question}
</Typography>
<Typography component="h5" variant="h5" align="center" className={classes.space}>
Sentiment
</Typography>
<Typography variant="subtitle1" color="textSecondary" align="center" className={classes.space}>
{item.Sentiment}
</Typography>
</CardContent>
<CardMedia className={classes.cover}>
{item.Sentiment ? renderPieChartForSentimentAnalysis(item.SentimentScore) : "No data to display"}
</CardMedia>
<div align="center" className={classes.space}>
<Button variant="outlined" color="primary" onClick={() => setupDialog(item.Answers)}>
Answers
</Button>
</div>
</div>
</Card>
</Grid>;
And this for styles:
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
cards: {
padding: theme.spacing(2),
height: "95%",
},
details: {
display: "flex",
flexDirection: "column",
},
space: {
marginTop: theme.spacing(1),
},
}));
Here you go with a solution
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
cards: {
padding: theme.spacing(2),
height: "95%",
},
details: {
display: "flex",
flexDirection: "column",
},
space: {
marginTop: theme.spacing(1),
},
question: {
overflow: "hidden",
display: "-webkit-box",
WebkitLineClamp: 2,
WebkitBoxOrient: "vertical"
}
}));
<Grid key={item.Qid} item xs={12} sm={4}>
<Card className={classes.cards}>
<div className={classes.details}>
<CardContent>
<Typography component="h5" variant="h5" align="center">
Question
</Typography>
<Typography variant="subtitle1" color="textSecondary" align="center" className={classes.space}>
{item.Qid}
</Typography>
<Typography variant="subtitle1" color="textSecondary" className={classes.question}>
{item.Question}
</Typography>
<Typography component="h5" variant="h5" align="center" className={classes.space}>
Sentiment
</Typography>
<Typography variant="subtitle1" color="textSecondary" align="center" className={classes.space}>
{item.Sentiment}
</Typography>
</CardContent>
<CardMedia className={classes.cover}>
{item.Sentiment ? renderPieChartForSentimentAnalysis(item.SentimentScore) : "No data to display"}
</CardMedia>
<div align="center" className={classes.space}>
<Button variant="outlined" color="primary" onClick={() => setupDialog(item.Answers)}>
Answers
</Button>
</div>
</div>
</Card>
</Grid>;
question class will restrict the number of lines to 2.