Material-ui: फ़ील्ड ड्रॉपडाउन स्थिति चुनें

@ मुनीम ऐसा लगता है कि आप menuStyle प्रोप का उपयोग कर सकते हैं जैसा कि पृष्ठ के निचले भाग के पास यहां चर्चा की गई

मैंने DropDownMenu विकल्प के रूप में पॉपओवर घटक का भी उपयोग किया है। यह पॉपओवर मेनू की दृश्य स्थिति पर आसान नियंत्रण की अनुमति देता है।

मैं केवल चुनिंदा फ़ील्ड में ड्रॉप डाउन चाहता हूं..हम ड्रॉप डाउन की लंबवत स्थिति को कैसे नियंत्रित कर सकते हैं। अभी मेनू ओवरलैपिंग और चुनिंदा फ़ील्ड लेबल छुपा रहा है।

+1 क्या इसका उत्तर दिया गया है?

बस इसे यहाँ छोड़ना चाहता था, अगर किसी और के पास 1.0 में एक ही सवाल है:

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

</Select>

@cobbs-totem आप असली mvp

@JeremyGrieshop आप विजेता हैं: D

@JeremyGrieshop भविष्य से आपको धन्यवाद देने के लिए छोड़ रहा है

@JeremyGrieshop आप मेरा दिन बनाते हैं

हाँ यह कमाल है!

<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 साल बाद, धन्यवाद! मैं

@JeremyGrieshop कृपया मेरी मदद करें, जैसा आपने कहा था मैंने किया लेकिन क्लिक के बाद मेरी स्थिति व्यूपोर्ट नीचे और व्यूपोर्ट बाएं है। कृपया मदद करे। मैं सामग्री यूआई मेनू का उपयोग कर रहा हूँ

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

एक समस्या थी कि ऊपर दिए गए उत्तरों से ड्रॉपडाउन स्थिति को सफलतापूर्वक बदलने के बाद चयन पर क्लिक करने पर लेबल गायब हो जाता है, डिफ़ॉल्ट स्टाइल परिवर्तन इनपुट लेबल रंग को फोकस पर सफेद कर देता है जो कि मेरा पृष्ठभूमि रंग है। इसे ठीक करने के लिए, स्टाइल को ओवरराइड करें <InputLabel classes={{focused: classes.X}}> जहां वर्ग X में color: "initial" । मुई v4.11.0

हैलो सभी को,
वर्तमान में @JeremyGrieshop और @pzanwar03 विधियों के साथ कोई सफलता नहीं मिल रही है ( मेनूइटम्स की स्थिति में कोई बदलाव नहीं)। क्या आपको लगता है कि यह इस तथ्य के कारण हो सकता है कि मेरा <Select> <FormControl> आसपास लिपटा हुआ है? किसी भी सलाह के लिए अग्रिम धन्यवाद।

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