CODEWITHSUNDEEP
reactjsmaterial-uifrontend
Tato
Tato

Reputation: 35

Text not aligning properly on MUI card component

I am new to react, I've been following a course and building a demo project. I've tried but for some reason i can't align the price text on a card that has a single line of description. In fact, I want the price to appear on the bottom left of the cards. This is what my code looks like. Any suggestion would be appreciated.

import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Typography from '@mui/material/Typography';

const ItemCard = (props) => {
  // return <div className={classes.card}>{props.children}</div>;

  return (
    <div>
      <Card
        sx={{
          maxWidth: 345,
          maxHeight: '100%',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.25)',
          height: '350px'
        }}
      >
        <CardMedia component='img' height='200' image={props.img} alt='icon' />
        <CardContent>
          <Typography gutterBottom variant='h5' component='div'>
            {props.name}
          </Typography>

          <Typography variant='body2' color='text.secondary'>
            {props.description}
          </Typography>

          <Typography style={{}}>TK. {props.price}</Typography>
        </CardContent>
      </Card>
    </div>
  );
};

export default ItemCard;

Please see this image

Upvotes: 2

Views: 595

Answers (2)

Akis
Akis

Reputation: 2282

You can add a min-height css property in your description Typography component like below (make sure the height is enough for fitting two lines. In case you have longer than two lines of description you can add the ellipsis css properties like in this solution):

<Typography variant='body2' color='text.secondary' sx={{minHeight: "30px"}}>
  {props.description}
</Typography>

Upvotes: 1

IAmRC1
IAmRC1

Reputation: 121

You can do this!

<CardActions>
  <Typography style={{}}>TK. {props.price}</Typography>
</CardActions>

Upvotes: 0

Related Questions