How to fill React Grid Layout item with material UI Card

Question

I'm using React Grid layout to display a grid of widgets.

Here is my grid component :

 class WidgetsGrid extends Component {
    render() {
      var layout = [
        { i: "a", x: 0, y: 0, w: 3, h: 3, minW: 2, maxW: 4 }
      ];
      var layouts = { lg: layout };
      return (
        <ResponsiveReactGridLayout
          className="layout"
          layouts={layouts}
          breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
          cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
        >
          <div key="a">
            <FirstWidget />
          </div>
        </ResponsiveReactGridLayout>
      );
    }
  }

I display a child (FirstWidget) inside the grid :

class FirstWidget extends Component {
    render() {
      return (
        <Card style={styles.main}>
          <IconActivity style={styles.activity} color={green500} />
          <CardHeader title="Premier Widget" subtitle="Sous-titre" />
          <CardText>
            <BarChart />
          </CardText>
          <div style={styles.footer}>
            <h6 style={styles.timeText}>
              <IconTime style={styles.iconText} />
              <span>Actualisé il y a 5 minutes</span>
            </h6>
          </div>
        </Card>
      );
    }
  }

The issue is that the display is not made properly and the FirstWidget card doesn't fill the div parent (div key="a") as you can see on the image below :

So how I can resolve that ?

Thank you for your help.

Any chance you could create a Code Sand Box of your issue, such as this example from material UI: https://codesandbox.io/s/02wnm073v. Generally what you are trying to achieve could probably be done with flexBox css definitions: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — dauffret, Apr 09 '18 at 17:54
Thank you for your answer dauffret ! The tricks with flexbox are perfectly working ! I've also solved the problem with the property "height : inherit" applied to the child — Putxe, Apr 13 '18 at 07:30
Great! Would you care to share your solution? This may help the next person that comes across your question! — dauffret, Apr 17 '18 at 15:19

score 1 · Accepted Answer · answered Dec 21 '18 at 19:34

To resolve that, I have sent height: inherit property from my container to my child by passing styles prop.

My container : WidgetsGrid.js

const styles = {
  main: { 
    backgroundColor: "#ffffff",
    height: "inherit"
  }
}

class WidgetsGrid extends Component {
    render() {
      var layout = [
        { i: "a", x: 0, y: 0, w: 3, h: 3, minW: 2, maxW: 4 }
      ];
      var layouts = { lg: layout };
      return (
        <ResponsiveReactGridLayout
          className="layout"
          layouts={layouts}
          breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
          cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
        >
          <div key="a">
            <FirstWidget style={styles} />
          </div>
        </ResponsiveReactGridLayout>
      );
    }
  }

Then in my child FirstWidget.js I get the height inherit prop by set style equal to styles. :

class FirstWidget extends Component {
    render() {
      return (
        <Card style={this.props.style.main}>
          <IconActivity style={styles.activity} color={green500} />
          <CardHeader title="Premier Widget" subtitle="Sous-titre" />
          <CardText>
            <BarChart />
          </CardText>
          <div style={styles.footer}>
            <h6 style={styles.timeText}>
              <IconTime style={styles.iconText} />
              <span>Actualisé il y a 5 minutes</span>
            </h6>
          </div>
        </Card>
      );
    }
  }

In that way the height is first defined by react-grid-layout with the div in the container, and then the material UI card is forced to set its height equal to the same heigth of its container, so you fill all the div as you wanted.

How to fill React Grid Layout item with material UI Card

1 Answers1