Material-ui: Posição suspensa do campo de seleção

@Muneem Parece que você poderia usar o menuStyle prop conforme discutido aqui próximo ao final da página.

Também usei o componente Popover como alternativa ao DropDownMenu . Ele permite um controle mais fácil sobre a posição visual do menu Popover.

Eu quero drop down apenas no campo de seleção .. como podemos controlar a posição vertical do menu drop down.right agora sobrepondo e ocultando o rótulo do campo de seleção.

+1 isso foi respondido?

Só queria deixar isso aqui, caso outra pessoa tenha a mesma pergunta em 1.0:

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

</Select>

@ cobbs-totem você o verdadeiro mvp

@JeremyGrieshop você é o campeão: D

@JeremyGrieshop Aparecendo do futuro para agradecer

@JeremyGrieshop Você faz meu dia

Sim, isso é incrível!

<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 anos depois, obrigado! 💯

@JeremyGrieshop por favor me ajude, eu fiz o que você disse, mas minha posição após o clique é a janela de visualização embaixo e a janela à esquerda. Por favor ajude. Estou usando o menu Material UI

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

teve um problema que o rótulo se perdeu quando selecionar é clicado após alterar com sucesso a posição da lista suspensa das respostas acima, o estilo padrão altera a cor do rótulo de entrada para branco no foco, que é a minha cor de fundo. Para corrigir isso, simplesmente substitua o estilo <InputLabel classes={{focused: classes.X}}> onde a classe X contém color: "initial" . mui v4.11.0

Olá a todos,
Atualmente sem sucesso (nenhuma mudança na posição dos MenuItems) com os métodos @JeremyGrieshop e @ pzanwar03 . Você acha que isso pode ser devido ao fato de que meu <Select> está enrolado em <FormControl> ? Obrigado por qualquer conselho com antecedência.

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