Material-ui: Dropdown-Position des Felds auswählen

@Muneem Es sieht so aus, als könnten Sie die Requisite menuStyle wie hier unten auf der Seite besprochen.

Ich habe auch die Popover- Komponente als Alternative zu DropDownMenu . Es ermöglicht eine einfachere Kontrolle über die visuelle Position des Popover-Menüs.

Ich möchte nur im Auswahlfeld ein Dropdown-Menü auswählen. Wie können wir die vertikale Position des Dropdown-Menüs steuern.

+1 wurde das beantwortet?

Wollte das nur hier belassen, falls jemand anderes die gleiche Frage in 1.0 hat:

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

</Select>

@cobbs-totem du bist der echte mvp

@JeremyGrieshop du bist der Champion :D

@JeremyGrieshop Schaut aus der Zukunft vorbei, um euch zu danken

@JeremyGrieshop Du machst meinen Tag

Ja das ist toll!

<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 Jahre später, danke! 💯

@JeremyGrieshop bitte helfen Sie mir, ich habe es wie gesagt getan, aber meine Position nach dem Klicken ist das Ansichtsfenster unten und das Ansichtsfenster links. Bitte helfen Sie. Ich verwende das Material-UI-Menü

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

hatte ein Problem, dass die Beschriftung fehlt, wenn auf Auswählen geklickt wurde, nachdem die Dropdown-Position aus den obigen Antworten erfolgreich geändert wurde, stellte sich heraus, dass das Standard-Design die Farbe der Eingabebeschriftung im Fokus auf Weiß ändert, was meine Hintergrundfarbe ist. Um dies zu beheben, überschreiben Sie einfach den Stil <InputLabel classes={{focused: classes.X}}> wobei die Klasse X color: "initial" . mui v4.11.0

Hallo alle,
Derzeit kein Erfolg (keine Änderung der Position der MenuItems) mit den Methoden @JeremyGrieshop und @pzanwar03 . Glauben Sie, dass dies daran liegen könnte, dass mein <Select> um das <FormControl> gewickelt ist? Danke für jeden Rat im Voraus.

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