CODEWITHSUNDEEP
reactjsmaterial-ui
AKrush95
AKrush95

Reputation: 1431

Make Card (or Paper) NOT take up full width Material UI

I'm trying to create a card element that does NOT span the entire width of the container it is in.

The Example seems to be able to do it fine

enter image description here

But when I attempt to use the example code, my card stretches the whole width of the page.

https://codesandbox.io/s/074zmkx0

enter image description here

Upvotes: 11

Views: 31933

Answers (3)

rejetto
rejetto

Reputation: 96

if you want to apply the inline-block solution, a clean way is to wrap the card inside a box

<Box display="inline-block">
    <Card...
</Box>

Upvotes: 4

Adithya
Adithya

Reputation: 3

Use sizing:

import { sizing } from '@material-ui/system';

card :{
    width:"50%"
}

For more information: https://material-ui.com/system/sizing/

Upvotes: -6

Nathan
Nathan

Reputation: 8141

Hi when I ran your example it also spans the entire page, but this is an easy fix. Within your Style.css you can add a css selector to change your Card component's display to be inline-block.

Style.css

    /* Card component */
    #root > div > div {
          display: inline-block;
    }

Upvotes: 8

Related Questions