'Material UI Card box-shadow being cut off

While using Material UI's Card. I am having an issue I do not usually have. box-shadow that is being cut off on the bottom and top hand side..

How can i fix this?

My code here:

import React, { Component } from 'react'
import './demo.css'
import { Card } from '@material-ui/core';


export default class MasonryLayout extends Component {
  render() {
    return (
      <div className="masonry">
        <Card className="item" style={{height:"120px"}} elevation={4}/>
        <Card className="item" style={{height:"190px"}} elevation={4}/>
        <Card className="item" style={{height:"220px"}} elevation={4}/>
        <Card className="item" style={{height:"130px"}} elevation={4}/>
        <Card className="item" style={{height:"140px"}} elevation={4}/>
      </div>
    )
  }
}
.masonry {
    column-count: 2;
    column-gap: 56px;
    margin: 50px;
}

.item {
    margin-bottom: 40px;
    break-inside: avoid;
}

screenshot blew:

screenshot

javascriptcssmaterial-ui


Solution 1:[1]

I had the same issue. I solved it by adding the "ENOUGH" margin to the bottom/side.

NOTE Just adding 1-2 px is not enough depending on your elevation. For me I had to add m={1.25} for elevation 5. If you add only a small amount of margin, it the shadows do not look natural and will look like a shadow in a box. You just need to add more margin to make it look as anticipated.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Tim Kim

Related Questions