Material-ui: Position de la liste déroulante du champ de sélection

@Muneem Il semble que vous puissiez utiliser l'accessoire menuStyle comme indiqué ici près du bas de la page.

J'ai également utilisé le composant Popover comme alternative au DropDownMenu . Il permet de contrôler plus facilement la position visuelle du menu Popover.

je veux que le menu déroulant ne se déroule que dans le champ sélectionné. Comment pouvons-nous contrôler la position verticale du menu déroulant. Pour le moment, le menu se chevauche et masque l'étiquette du champ sélectionné.

+1 cela a-t-il été répondu ?

Je voulais juste laisser ça ici, au cas où quelqu'un d'autre aurait la même question en 1.0 :

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

</Select>

@cobbs-totem vous le vrai mvp

@JeremyGrieshop tu es le champion :D

@JeremyGrieshop En passant du futur pour vous remercier

@JeremyGrieshop Vous faites ma journée

Ouais c'est génial !

<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 ans après, merci ! ??

@JeremyGrieshop s'il vous plaît aidez-moi, j'ai fait comme vous l'avez dit mais ma position après le clic est le bas de la fenêtre et la fenêtre à gauche. S'il vous plaît aider. J'utilise le menu Material UI

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

a eu un problème où l'étiquette devient manquante lorsque l'on clique sur sélectionner après avoir changé avec succès la position de la liste déroulante à partir des réponses ci-dessus, il s'avère que le style par défaut change la couleur de l'étiquette d'entrée en blanc sur le focus qui est ma couleur d'arrière-plan. Pour résoudre ce problème, remplacez simplement le style <InputLabel classes={{focused: classes.X}}> où la classe X contient color: "initial" . mui v4.11.0

Bonjour à tous,
N'ayant actuellement aucun succès (pas de changement dans la position des MenuItems) avec les @pzanwar03 . Pensez-vous que cela pourrait être dû au fait que mon <Select> est enroulé autour du <FormControl> ? Merci pour tout conseil à l'avance.

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