Material-ui: Позиция раскрывающегося списка Selectfield

@Muneem Похоже, вы могли бы использовать опору menuStyle как описано здесь в нижней части страницы.

Я также использовал компонент Popover в качестве альтернативы DropDownMenu . Это позволяет упростить управление визуальным положением всплывающего меню.

Я хочу раскрыть только в поле выбора ... как мы можем контролировать вертикальное положение раскрывающегося списка. прямо сейчас перекрытие меню и скрытие метки поля выбора.

+1 был ли на это дан ответ?

Просто хотел оставить это здесь, на случай, если у кого-то еще есть такой же вопрос в 1.0:

<Select
  MenuProps={{
    getContentAnchorEl: null,
    anchorOrigin: {
      vertical: "bottom",
      horizontal: "left",
    }
  }}
>

</Select>

@ cobbs-totem ты настоящий мвп

@JeremyGrieshop ты чемпион: D

@JeremyGrieshop Заглядывает из будущего, чтобы поблагодарить вас

@JeremyGrieshop Ты делаешь мой день

Да, это круто!

<Select
          defaultValue=""
          MenuProps={{
            anchorOrigin: {
              vertical: "bottom",
              horizontal: "left"
            },
            transformOrigin: {
              vertical: "top",
              horizontal: "left"
            },
            getContentAnchorEl: null
          }}
        >
          <MenuItem value={1}>Option 1</MenuItem>
          <MenuItem value={2}>Option 2</MenuItem>
</Select>

@JeremyGrieshop 2 года спустя, спасибо! 💯

@JeremyGrieshop, пожалуйста, помогите мне, я сделал, как вы сказали, но моя позиция после щелчка - внизу

<Menu anchorBuyer={anchorBuyer} anchorOrigin={{ vertical: "top", horizontal: "left" }} id={menuIdBuyer} keepMounted transformOrigin={{ vertical: "top", horizontal: "left" }} open={isMenuBuyerOpen} onClose={handleMenuCloseBuyer} >

возникла проблема с отсутствием метки при нажатии кнопки выбора после успешного изменения положения раскрывающегося списка из ответов выше, оказалось, что стиль по умолчанию изменяет цвет метки ввода на белый в фокусе, который является моим цветом фона. Чтобы исправить это, просто переопределите стиль <InputLabel classes={{focused: classes.X}}> где класс X содержит color: "initial" . mui v4.11.0

Всем здравствуйте,
В настоящее время нет никаких успехов (без изменений в позиции MenuItems) с методами @JeremyGrieshop и @ pzanwar03 . Как вы думаете, это может быть связано с тем, что мой <Select> обернут вокруг <FormControl> ? Спасибо за любой совет заранее.

`` javascript <FormControl className={classes.textField}> <InputLabel id="demo-simple-select-outlined-label">Type</InputLabel> <Select MenuProps={{ anchorOrigin: { vertical: "bottom", horizontal: "left" }, transformOrigin: { vertical: "top", horizontal: "left" }, getContentAnchorEl: null }} labelId="demo-simple-select-outlined-label" id="demo-simple-select-outlined" value={props.x} onChange={props.handleChange} label="x" name="x"> <MenuItem value={'1'}>1</MenuItem> <MenuItem value={'2'}>2</MenuItem> </Select> </FormControl>