CODEWITHSUNDEEP
reactjsmaterial-designmaterial-uijsx
user6233283
user6233283

Reputation:

Material-UI CardContent has a 3px Bottom Padding

Note: I already looked into this question: Cant remove padding-bottom from Card Content in Material UI

But the accepted answer did not fix my issue.

I am using the Material UI React Library attempting to recreate the below image:

enter image description here

I am completely new to using the Material UI, so most of my code will likely not be optimized and probably does not follow best practices. Indeed, I'd be interested to hear how it could be made better.

Here is my code thus far:

<Card className={classes.card}>
  <CardActionArea containerStyle={{ paddingBottom: 0 }}>
    <CardMedia
      className={classes.media}
      title="Contemplative Reptile"
      image="none"
    >
      <div className={classes.heading}>
        <AccessAlarmIcon className={classes.icon}/> 
        <Typography className={classes.mainText} variant="h5" component="h2">Delayed</Typography>
        <Typography className={classes.subText} variant="subtitle1" component="h5">9:30pm Departure</Typography>
      </div>        
    </CardMedia>
    <CardContent className={classes.content}>
      <img className={classes.mainPic} src="http://images1.fanpop.com/images/image_uploads/Golden-Gate-Bridge-san-francisco-1020074_1024_768.jpg"></img>
    </CardContent>
  </CardActionArea>
</Card>

With these styles:

const styles = {
  card: {
    maxWidth: 300,
  },
  media: {
    height: 60,
    backgroundColor: "#FF1547",
    padding: 16
  },
  icon: {
    color: "white",
    fontSize: 25,
    marginRight: 10
  },
  mainText: {
    color: "white",
    display: "inline-block",
    position: "relative",
    top: -3
  },
  subText: {
    color: "white",
    marginLeft: 36,
  },
  heading: {
    padding: 0
  },
  mainPic: {
    width: 300,
    height: 200,
    marginBottom: 0,
    padding: 0
  },
  content: {
    padding: "0 !important",
    '&:last-child': {
      paddingBottom: "0 !important",
    },
  }
};

This is what it looks like when rendered:

enter image description here

Notice the bottom padding. The Chrome Developer Tools show a 3px bottom padding under the User Agent Stylesheet. I imported a CSS Reset which did not help.

Again, I'm sure that my styles and JSX could be made better, but efficiency, optimization, and elegance were not of my concern.

Thanks, Jamie

Upvotes: 2

Views: 3557

Answers (2)

Ryan Cogswell
Ryan Cogswell

Reputation: 81106

That padding at the bottom is actually caused by the box-shadow styling tied to the "elevation" property of Paper (which Card is based on). Setting the elevation to 0 gets rid of it:

<Card className={classes.card} elevation={0}>

However that also gets rid of the raised look of the card. The correct way to deal with this is to specify the image in a CardMedia element rather than using a separate img tag inside a CardContent element.

<CardMedia
          className={classes.mainPic}
          image="http://images1.fanpop.com/images/image_uploads/Golden-Gate-Bridge-san-francisco-1020074_1024_768.jpg"
        />

Here's a CodeSandbox showing this:

Edit kl6m1kv3o

You can also see this approach used in this demo:

https://material-ui.com/demos/cards/#ui-controls

Upvotes: 5

Chance
Chance

Reputation: 1654

See if this is what you want. I changed mainPic and content. This syntax containerStyle={{ paddingBottom: 0 }} does not seem correct even gets the alert in the browser. Maybe you want to change the styleor classes={{root}} of the api CardActionArea.

mainPic: {
  width: 300,
  marginBottom: 0,
  padding: 0,
  borderRadius: '0 0 4px 4px',

},
content: {
  height: 225,
  padding: "0 !important",
  '&:last-child': {
    paddingBottom: "0 !important",
  },
}

enter image description here

Upvotes: 1

Related Questions