Material-ui: Selectfield dropdown position

[Muneem]

How to set position of dropdown of selectfield. I want to show dropdown below selectfield i dont want it should come above it

[m2mathew]

@Muneem It looks like you could use the menuStyle prop as discussed here near the bottom of the page.

I have also used the Popover component as an alternative to the DropDownMenu. It allows easier control over the visual position of the Popover menu.

[sravivenki]

i want drop down only in select field..how can we control vertical position of drop down.right now menu overlapping and hiding the select field label.

[ddawkins7]

+1 has this been answered?

[JeremyGrieshop]

Just wanted to leave this here, in case someone else has the same question in 1.0:

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

</Select>

[oliver-welch]

@cobbs-totem you the real mvp

[quocvan1311]

@JeremyGrieshop you are the champ :D

[ryanvazquez]

@JeremyGrieshop Dropping in from the future to to thank you

[kipperlhp]

@JeremyGrieshop You make my day

[Tcormons]

Yeah this is awesome!

[pzanwar03]

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

[krislao]

@JeremyGrieshop 2 years after, thank you! 💯

[sudarshan-mane]

@JeremyGrieshop please help me, I did as you said but my position after click is viewport bottom and viewport left. Please help. I am using Material UI Menu

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

[nicolauscg]

had an issue that label becomes missing when select is clicked after successfully changing dropdown position from answers above, turns out the default styling changes input label color to white on focus which is my background color. To fix it, simply override the styling <InputLabel classes={{focused: classes.X}}> where class X contains color: "initial". mui v4.11.0

[tunino91]

Hello All,
Currently not having any success (no change in the MenuItems' position) with @JeremyGrieshop and @pzanwar03 methods. Do you think this might be due to the fact that my <Select> is wrapped around the <FormControl> ? Thanks for any advise in advance.

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