CODEWITHSUNDEEP
reactjsmaterial-uispacing
ghostagent151
ghostagent151

Reputation: 1396

Remove extra white space to the right of this Grid element, React application with Material UI

I'm having trouble removing the extra white space to the right of this Popover, the content is styled with a Grid. I can fix it if I use Box elements, however, the lead dev is asking me not to use Box elements.

My component

export const GridWrapper = styled(Grid)(({ theme }) => ({
  pointerEvents: 'none',
  padding: theme.spacing(1),
}));

        <GridWrapper container>
          <Grid item xs={6}>
            <Typography color="primary">Waiver</Typography>
            <Typography>{name}</Typography>

            <Typography color="primary">Service</Typography>
            <Typography>
              {serviceCategory}
            </Typography>

            <Typography color="primary">Account</Typography>
            <Typography>{account}</Typography>
          </Grid>

          <Grid item xs={6}>
            <Typography color="primary">Waiver T</Typography>
            <Typography>{type}</Typography>

            <Typography color="primary">Service</Typography>
            <Typography>{''}</Typography>

            <Typography color="primary">Alt</Typography>
            <Typography>{alt}</Typography>
          </Grid>
          <Grid item xs={12}>
            <Typography color="primary">Increase</Typography>
            <Typography>
              {increase}
            </Typography>
          </Grid>
          <Grid item xs={6}>
            <Typography color="primary">Index</Typography>
            <Typography>
              {index}
            </Typography>
          </Grid>
        </GridWrapper>

Anyone know of any props or way for me to style this to reduce white space that appears on the right side? This occurs with the 2nd grid item shown above.

Upvotes: 2

Views: 6856

Answers (2)

StomperHK
StomperHK

Reputation: 1

To solve this problem you can use the value fit-content of both width and height properties, this will remove the undesired extra white space in a grid context.

Upvotes: 0

Cereal
Cereal

Reputation: 3839

Just going to take a shot in the dark here. I made a codesandbox of your code, but it doesn't really highlight the problem.

When you have a grid in material-ui, it fills up all available horizontal space in some parent. Using grid items, you can display on a 12 column grid.

If you set 2 columns to xs={6}, each item is going to take up 50% of the parent, regardless of their content. I believe the problem you're facing is that you want your second column to actually shrink to fit the content. However, you also have additional fullwidth columns that would maintain the parent's width even if you did shrink the second column.

So from what I can tell, all you need to do is make the parent container smaller. So if this is a popover, and you want it to be 240px wide, you'd set the max-width to 240px. Example: https://codesandbox.io/s/pensive-water-k6sth

I'd also experiment with making the second column xs={4} and the first column xs={8} or similar. Making the column smaller itself will also reduce the whitespace on the right side, however it'll expand the whitespace on the left side.

Upvotes: 1

Related Questions