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.
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>
my COde:
<Accordion style={{ width: '550px' }} expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
<AccordionSummary aria-controls="panel1d-content" id="panel1d-header">
<Typography style={{ fontWeight: 700 }}> Gig Posted </Typography>
</AccordionSummary>
<AccordionDetails>
<Typography style={{ fontWeight: 700 }} >
Card Owner Name
</Typography>
<Divider />
<Typography style={{ marginLeft: '350px', marginTop: '-23px' }}>
{job_summary.card_alias_name}
</Typography>
I'm relatively new to React + Material, and looking for a solution to dynamically updating a Typography element based on changes made to a slider. In essence, when the slider is updated, it updates the value in a key/value inside a JSON object. However I cannot find a way to update the Typography element once that JSON object is updated, initially the Typography is able to pull the default value from the JSON object, but after the updates happen I cannot work a solution to update the data on the page.
Below is a screenshot of the web page I'm working on, as well as the Javascript behind the component.
Thanks, in advance.
This function displays the sliders and text, focus on the value associated with bandwidth:
export function PricingToolHosting(){
return(
<Box sx={{
display: 'grid',
gridTemplateRows: 'auto auto auto auto',
width: '100%',
height: '75vh',
paddingLeft: '10vw',
paddingRight: '10vw'
}}>
<Box sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
paddingTop: '2vh'
}}>
<Typography variant="h4">
Hosting
</Typography>
</Box>
<Box sx={{
display: 'grid',
gridTemplateColumns: '25% 25% 25% 25%',
gridGap: '25px'
}}>
<Box sx={{width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
<Typography align="center">
Bandwidth
</Typography>
<Slider
name="bandwidth"
onChange={updateValue}
defaultValue={1}
aria-label="Bandwidth"
steps={1}
getAriaValueText={valueText}
marks={bandwidthMarks}
min={1}
max={3}
valueLabelDisplay="auto"
sx={{width: '75%'}}>
</Slider>
</Box>
<Box sx={{width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
<Typography align="center">
Monthly Minor Changes
</Typography>
<Slider
name="minor"
onChange={updateValue}
defaultValue={0}
aria-label="Minor Changes Per Month"
steps={1}
marks={minorChangeMarks}
min={0}
max={25}
valueLabelDisplay="auto"
sx={{width: '75%'}}>
</Slider>
</Box>
<Box sx={{width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
<Typography align="center">
Monthly Major Changes
</Typography>
<Slider
name="major"
onChange={updateValue}
defaultValue={0}
aria-label="Major Changes Per Month"
steps={1}
marks={majorChangeMarks}
min={0}
max={5}
valueLabelDisplay="auto"
sx={{width: '75%'}}>
</Slider>
</Box>
<Box sx={{width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
<Typography align="center">
Yearly Emergency Support Hours
</Typography>
<Slider
name="emergency"
onChange={updateValue}
defaultValue={0}
aria-label="Emergency Support Hours per Year"
steps={1}
marks={emergencySupportMarks}
min={0}
max={10}
valueLabelDisplay="auto"
sx={{width: '75%'}}>
</Slider>
</Box>
</Box>
<Box sx={{
display: 'grid',
gridTemplateRows: 'auto auto',
}}>
<Divider></Divider>
<Box sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', paddingTop: '1vh'}}>
<Typography variant="h4">
Hosting Breakdown
</Typography>
</Box>
<Box sx={{
display: 'grid',
gridTemplateColumns: '25% 25% 25% 25%'
}}>
<Box sx={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
<Typography variant="h5">
Item
</Typography>
<Divider></Divider>
<Typography>
Bandwidth
</Typography>
<Typography>
Minor Changes/Month
</Typography>
<Typography>
Major Changes/Month
</Typography>
<Typography>
Emergency Support Hours/Year
</Typography>
</Box>
<Box sx={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
<Typography variant="h5">
Quantity
</Typography>
<Divider></Divider>
<Typography children={jsonObject.bandwidth}>
</Typography>
<Typography>
13
</Typography>
<Typography>
4
</Typography>
<Typography>
8
</Typography>
</Box>
<Box sx={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
<Typography variant="h5">
Cost
</Typography>
<Divider></Divider>
<Typography>
$15.00
</Typography>
<Typography>
$5.50
</Typography>
<Typography>
$55.00
</Typography>
<Typography>
$35.00
</Typography>
</Box>
<Box sx={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
<Typography variant="h5">
Total
</Typography>
<Divider></Divider>
<Typography>
$45.00
</Typography>
<Typography>
$71.50
</Typography>
<Typography>
$220.00
</Typography>
<Typography>
$280.00
</Typography>
</Box>
</Box>
<Box>
<Divider></Divider>
<Box sx={{display: 'grid', gridTemplateColumns: '50% 50%'}}>
<Box>
<Typography align="center" variant="h5">
Monthly
</Typography>
<Typography align="center">
$616.50
</Typography>
</Box>
<Box>
<Typography align="center" variant="h5">
Yearly
</Typography>
<Typography align="center">
$7,398.00
</Typography>
</Box>
</Box>
</Box>
</Box>
</Box>
);
}
Here is are the functions which control the json object:
const hostingJson = {
"bandwidth": 1,
"minor": 0,
"major": 0,
"emergency": 0
};
var jsonObject = hostingJson;
function valueText(value){
return `${value}TB`;
}
function setBandwidth(value, obj){
obj.bandwidth = value;
}
function setMinor(value, obj){
obj.minor = value;
}
function setMajor(value, obj){
obj.major = value;
}
function setEmergency(value, obj){
obj.emergency = value;
}
function updateValue(event, value){
switch(event.target.name){
case "bandwidth":
setBandwidth(value, jsonObject);
break;
case "minor":
setMinor(value, jsonObject);
break;
case "major":
setMajor(value, jsonObject);
break;
case "emergency":
setEmergency(value, jsonObject);
break;
}
}
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.