CODEWITHSUNDEEP
reactjsmaterial-uijsx
kevinewing
kevinewing

Reputation: 49

React Material UI, Card Spacing Issue

I am using Material UI in a react app. I am using the Material UI component cards and I am getting some undesired results. I am getting white space on the right edge of the page. I am hoping to create gaps between "neighboring" cards. In order to do this, I have implemented the following code:

    <div>
        <Grid container spacing={10} justify="center">
            <Grid item xs={12}>
                <Card>
                    <CardContent>
                      ...
                    </CardContent>
                </Card>
            </Grid>
            <Grid item xs={12} lg={6}>
                <Card>
                    <CardContent>
                        ...
                    </CardContent>
                </Card>
            </Grid>
             <Grid item xs={12} lg={6}>
                <Card>
                    <CardContent>
                        ...
                    </CardContent>
                </Card>
            </Grid>
        </Grid>
    </div>

This gets the desired spacing around and between the cards. However it also adds white space to the right side of the page. So that the page is now horizontally scrollable. When I remove the spacing={10} argument this space is no longer there. Is there a way to get the best of both worlds and the spacing between the cards without pushing padding over the edge of the screen?

Would love to hear any ideas! Thanks!

Upvotes: 0

Views: 10257

Answers (1)

Snappy Web Design
Snappy Web Design

Reputation: 212

This behavior is a known limitation with Material-UI. You have two options:

  1. Eliminate the spacing entirely and use your own CSS
  2. Apply padding to the parent div. Ex:
    <div style={{ padding: 30 }} >
        <Grid container spacing={10} justify="center">
            .....
        </Grid>
    </div>

Demo

You can read more about this on Material-UI's documentation: https://material-ui.com/components/grid/#negative-margin

Upvotes: 2

Related Questions