Material-UI Drawer acts different on tablets

Question

I'm getting some weird problems with the Material-UI drawer component. It scrolls horizontal on my iPad, compared to my MacBook and Android Phone, which actually scroll vertically..

Result on MacBook (how it's supposed to be..):

As you can see, it scrolls down and it overflows vertically, just like on my phone

Result on iPad (how it's not supposed to be..):

However, as you can see.. on my iPad it overflows horizontally..?

The code for the drawer:

<Drawer
  anchor="right"
  open={open}
  onClose={HandleClose}
  classes={{ paper: classes.drawerPaper }}>
    <Toolbar />
      <Typography className={classes.title}>Selecteer actieve regio's</Typography>
      <FormControl component="fieldset" className={classes.formControl}>
        <FormGroup>
          {regios.map(regio => (
            <FormControlLabel
              control={
                <Checkbox
                  checked={geselecteerdeRegios.includes(regio.ID)}
                  onChange={e => handleRegioChange(regio.ID, e.target.checked)}
                />
              }
              name={regio.Naam}
              label={regio.Naam}
              key={regio.Naam}
            />
         ))}
    </FormGroup>
  </FormControl>
</Drawer>

And these are the styles for the drawer

drawerPaper: {
  width: 320
},

Why is this happening? And how can I prevent this and only allow vertical scroll/overflow instead of horizontal..?

Edit: codesandbox: https://codesandbox.io/s/elated-khayyam-t6klg?file=/src/Drawer.js

Thanks in advance! :-)

Answer 1

This appears to be related to the default styles on FormGroup:

  /* Styles applied to the root element. */
  root: {
    display: 'flex',
    flexDirection: 'column',
    flexWrap: 'wrap',
  },

You can override this to nowrap to prevent the wrapping (as shown below with classes.formGroup in a modified version of your sandbox). I have not taken the time to understand why this behaves differently on iPads than on other devices.

import React from "react";
import {
  Drawer,
  FormControl,
  FormGroup,
  FormControlLabel,
  Checkbox,
  Toolbar,
  Typography,
  makeStyles
} from "@material-ui/core";

const useStyles = makeStyles(theme => ({
  drawerPaper: {
    width: 320
  },
  formGroup: {
    flexWrap: "nowrap"
  }
}));

export default () => {
  let items = [];

  for (let i = 0; i < 25; i++) items.push("foobarfazboo" + i);

  const classes = useStyles();

  return (
    <Drawer anchor="right" open={true} classes={{ paper: classes.drawerPaper }}>
      <Toolbar />
      <Typography className={classes.title}>
        Selecteer actieve regio's
      </Typography>
      <FormControl component="fieldset" className={classes.formControl}>
        <FormGroup className={classes.formGroup}>
          {items.map(item => (
            <FormControlLabel
              control={<Checkbox />}
              name={item}
              label={item}
              key={item}
            />
          ))}
        </FormGroup>
      </FormControl>
    </Drawer>
  );
};

Unfortunately, this still leaves some odd behavior on the iPad. It seems to try to fit all of the content in the Drawer without scrolling (e.g. if I add 100 items instead of 25, they still are all forced to fit and become an unreadable, squished mess).

I don't fully understand what is happening, but it appears to be an interplay between the height and display: flex on the Drawer Paper. Changing the display from flex to block fixes this. I don't see any obvious new problems caused by this, but I haven't taken a lot of time to look at what other effects this change causes. With this change, the above "nowrap" change appears unnecessary.

import React from "react";
import {
  Drawer,
  FormControl,
  FormGroup,
  FormControlLabel,
  Checkbox,
  Toolbar,
  Typography,
  makeStyles
} from "@material-ui/core";

const useStyles = makeStyles(theme => ({
  drawerPaper: {
    width: 320,
    display: "block"
  }
}));

export default () => {
  let items = [];

  for (let i = 0; i < 25; i++) items.push("foobarfazboo" + i);

  const classes = useStyles();

  return (
    <Drawer anchor="right" open={true} classes={{ paper: classes.drawerPaper }}>
      <Toolbar />
      <Typography className={classes.title}>
        Selecteer actieve regio's
      </Typography>
      <FormControl component="fieldset" className={classes.formControl}>
        <FormGroup>
          {items.map(item => (
            <FormControlLabel
              control={<Checkbox />}
              name={item}
              label={item}
              key={item}
            />
          ))}
        </FormGroup>
      </FormControl>
    </Drawer>
  );
};