Material-UI Флажок "прыгает" в сетке - PullRequest
Новая
       17

Material-UI Флажок "прыгает" в сетке

0 голосов
/ 14 июня 2019

Следующая структура сетки в моем Разборном пользовательском интерфейсе материалов - это мой желаемый макет:

Желаемая разметка сетки

Я уже пытался изменить макет, играя с flex-direction.

https://codesandbox.io/s/epic-nobel-ov48j

Когда я нажимаю на флажки, последний флажок имеет тенденцию «выпрыгивать» из своей позиции и складывается под двумя другими. На данный момент я не могу найти причину почему. Вы можете видеть результат этого поведения на этой картинке:

нежелательная компоновка сетки

На меньших экранах это поведение будет нормальным, но особенно на больших экранах я хочу макет с двумя столбцами, где первый содержит два флажка, а второй - третий.

Ответы [ 2 ]

1 голос
/ 14 июня 2019

Попробуйте это: 

  <ExpansionPanelDetails className={classes.details}>
    <Typography paragraph>Exmaple text</Typography>
    <Grid container justify="space-between" direction="row">
      <Grid container item justify="space-between" xs={6}>
        <Grid container item style={{ alignItems: "center" }} direction="row">
          <Grid item xs={6}>Text Supervisor</Grid>
          <Grid item xs={6}>
            <CustomCheckBox employeePosition="supervisor" />
          </Grid>
        </Grid>
        <Grid container item style={{ alignItems: "center" }}>
          <Grid item xs={6}>Text Employee</Grid>
          <Grid item xs={6}>
            <CustomCheckBox employeePosition="employee" />
          </Grid>
        </Grid>
      </Grid>

      <Grid container item xs={6} style={{ alignContent: "center" }} direction="row">
        <Grid container item style={{ alignItems: "center" }}>
          <Grid item xs={6}>Text Employee</Grid>
          <Grid item xs={6}>
            <CustomCheckBox employeePosition="employee" />
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  </ExpansionPanelDetails>

Я довольно новичок в этом js / material-ui / реагировать, так что вы, вероятно, можете улучшить его еще больше.

0 голосов
/ 17 июня 2019

@ Радослав Цибульский: Спасибо за вашу помощь. С вашим кодом и некоторыми изменениями я смог заставить его работать. Вам не нужно указывать direction = "row" , потому что это урегулирование по умолчанию.

Теперь это выглядит так: 

<ExpansionPanelDetails className={classes.details}>
    <Typography paragraph>
      Example text
    </Typography>
    <Grid container justify="space-between">
        <Grid container item xs={6} md={3}>
            <Grid
                container
                item
                style={{
                    alignItems: "center",
                    paddingBottom: "8px",
                }}
            >
                <Grid
                    item
                    xs={6}
                    style={{
                        textAlign: "right",
                        paddingRight: "16px",
                    }}
                >
                    Text Supervisor
                </Grid>
                <Grid item xs={6}>
                    <CustomCheckBox employeePosition="supervisor" />
                </Grid>
            </Grid>
            <Grid
                container
                item
                style={{ alignItems: "center" }}
            >
                <Grid
                    item
                    xs={6}
                    style={{
                        textAlign: "right",
                        paddingRight: "16px",
                    }}
                >
                    Text Employee
                </Grid>
                <Grid item xs={6}>
                    <CustomCheckBox employeePosition="employee" />
                </Grid>
            </Grid>
        </Grid>

        <Grid
            container
            item
            xs={6}
            md={3}
            style={{ alignContent: "center" }}
            direction="row"
        >
            <Grid
                container
                item
                style={{ alignItems: "center" }}
            >
                <Grid
                    item
                    xs={6}
                    style={{
                        textAlign: "right",
                        paddingRight: "16px",
                    }}
                >
                    {useTranslation("employee")}
                </Grid>
                <Grid item xs={6}>
                    <CustomCheckBox employeePosition="employee" />
                </Grid>
            </Grid>
        </Grid>
        <Hidden smDown>
            <Grid container item md={6} />
        </Hidden>
    </Grid>
</ExpansionPanelDetails>
...