Material-UI Drawer действует по-разному на планшетах

Question

У меня странные проблемы с компонентом ящика Material-UI. Он прокручивается по горизонтали на моем iPad, по сравнению с моим MacBook и Android Phone, которые на самом деле прокручивают вертикально ..

Результат на MacBook (как это должно быть ..) :

Как вы можете видеть, он прокручивается вниз и переполняется вертикально, как на моем телефоне

Результат на iPad (как это не должно быть ..) :

Однако, как вы можете видеть ... на моем iPad он переполняется горизонтально ..?

Код для ящика :

<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>

А вот стили для ящика

drawerPaper: {
  width: 320
},

Почему это происходит? И как я могу предотвратить это и разрешить только вертикальную прокрутку / переполнение вместо горизонтальной ..?

Редактировать: codesandbox: https://codesandbox.io/s/elated-khayyam-t6klg?file= / src / Drawer. js

Заранее спасибо! : -)

Answer 1

Похоже, это связано с стилями по умолчанию на FormGroup:

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

Вы можете переопределить это значение на nowrap, чтобы предотвратить перенос (как показано ниже с помощью classes.formGroup в модифицированной версии вашей песочницы). Я не потратил время, чтобы понять, почему это ведет себя по-другому на iPad, чем на других устройствах.

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>
  );
};

К сожалению, это все еще оставляет некоторые странные поведение на iPad. Кажется, он пытается поместить весь контент в Drawer без прокрутки (например, если я добавлю 100 элементов вместо 25, они все равно будут вынуждены соответствовать и стать нечитаемым, сжатым беспорядком).

Я не до конца понимаю, что происходит, но, похоже, это взаимодействие между height и display: flex на Drawer Paper. Изменение дисплея с flex на block исправляет это. Я не вижу каких-либо очевидных новых проблем, вызванных этим, но я не потратил много времени, чтобы посмотреть, какие другие эффекты вызывает это изменение. С этим изменением вышеуказанное изменение "nowrap" кажется ненужным.

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>
  );
};