6

I ran into a problem on Safari browser where my Material UI Grid container does not hold its Grid item elements within it's boundaries. This seems to be a problem only for Safari browsers.

Here is what the element should look like and it does on all browsers except for Safari

And there goes Safari

And here is my code for the page.

<Grid
      item
      container
      direction="column"
      justify="space-between"
      className={classes.questionContainer}
    >
      <Grid item>
        <Typography component="h1" variant="h1">
          {question.text}
        </Typography>
      </Grid>

      <Grid
        item
        container
        xs={12}
        justify="flex-start"
        className={classes.btnBlock}
      >
        <Grid item xs={3} className={classes.btnContainer}>
          <Button
            variant="outlined"
            color="primary"
            className={classes.btn}
          >
            {customButtonTitle1 || 'Yes'}
          </Button>
        </Grid>
        <Grid item xs={3} className={classes.btnContainer}>
          <Button
            variant="outlined"
            color="primary"
            className={classes.btn}
          >
            {customButtonTitle2 || 'No'}
          </Button>
        </Grid>
          <Grid item xs={3} className={classes.btnContainer}>
            <Button
              variant="outlined"
              color="primary"
              className={classes.btn}
            >
              {customButtonTitle3}
            </Button>
          </Grid>
      </Grid>
    </Grid>

const useStyles = makeStyles((theme: Theme) => ({
  questionContainer: {
    padding: theme.spacing(6, 6),
    minHeight: '340px',
  },

  btnBlock: {
    flexBasis: 0,
  },
  btnContainer: {
    marginRight: '12px',
  },
  btn: {
    fontSize: '16px',
    lineHeight: '24px',
    color: theme.palette.text.secondary,
    padding: '10px 0',
    width: '100%',
    margin: '0 12px',
  },
}))

Why is this happening and how can I fix that for Safari and not break for other browser? Unfortunately, I do not have access to a Mac OS to test it myself properly

Oleksandr Fomin
  • 2,005
  • 5
  • 25
  • 47

1 Answers1

0

Can you try remove "item" in your Grid container?

<Grid
      container
      direction="column"
      justify="space-between"
      className={classes.questionContainer}
    >
Pavel Gerasimov
  • 31
  • 2
  • 1
    Please take the [tour] and read up on [answer]. Is this a rhetorical question and as such an answer, or is it a question to the OP? In case of the former, please [edit] the post to say *why* it answers, in case of the latter please delete this. – Adriaan Oct 25 '22 at 08:27