Material-ui: Posición desplegable de Selectfield

@Muneem Parece que podrías usar el prop menuStyle como se explica aquí cerca de la parte inferior de la página.

También he usado el componente Popover como alternativa al DropDownMenu . Permite un control más fácil sobre la posición visual del menú Popover.

Quiero desplegar solo en el campo de selección ... ¿Cómo podemos controlar la posición vertical del menú desplegable? Ahora mismo, el menú se superpone y oculta la etiqueta del campo de selección.

+1 ¿esto ha sido respondido?

Solo quería dejar esto aquí, en caso de que alguien más tenga la misma pregunta en 1.0:

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

</Select>

@ cobbs-totem eres el verdadero mvp

@JeremyGrieshop eres el campeón: D

@JeremyGrieshop Llegando desde el futuro para agradecerle

@JeremyGrieshop Me

¡Sí, esto es asombroso!

<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 años después, ¡gracias! 💯

@JeremyGrieshop por favor ayúdame, hice lo que dijiste, pero mi posición después de hacer clic es la parte inferior de la ventana gráfica y la ventana izquierda. Por favor ayuda. Estoy usando el menú Material UI

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

Tuve un problema en el que la etiqueta se pierde cuando se hace clic en Seleccionar después de cambiar con éxito la posición del menú desplegable de las respuestas anteriores, resulta que el estilo predeterminado cambia el color de la etiqueta de entrada a blanco en el foco, que es mi color de fondo. Para solucionarlo, simplemente anule el estilo <InputLabel classes={{focused: classes.X}}> donde la clase X contiene color: "initial" . mui v4.11.0

Hola a todos,
Actualmente no está teniendo ningún éxito (sin cambios en la posición de MenuItems) con los métodos @JeremyGrieshop y @ pzanwar03 . ¿Crees que esto podría deberse al hecho de que mi <Select> está envuelto alrededor del <FormControl> ? Gracias por cualquier consejo de antemano.

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