Material-ui: Selectfield المنسدلة موقف

Muneem يبدو أنه يمكنك استخدام menuStyle كما تمت مناقشته هنا بالقرب من أسفل الصفحة.

لقد استخدمت أيضًا مكون Popover كبديل لـ DropDownMenu . يسمح بتحكم أسهل في الموضع المرئي لقائمة Popover.

أريد القائمة المنسدلة فقط في الحقل المختار .. كيف يمكننا التحكم في الوضع الرأسي للأسفل ، والآن تتداخل القائمة وإخفاء تسمية الحقل المحدد.

+1 هل تم الرد على هذا؟

أردت فقط ترك هذا هنا ، في حال كان لدى شخص آخر نفس السؤال في الإصدار 1.0:

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

</Select>

@ cobbs-totem أنت mvp الحقيقي

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 بعد عامين ، شكرًا لك! 💯

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" . mui v4.11.0

اهلا جميعا،
لا يوجد حاليًا أي نجاح (لا يوجد تغيير في موقع MenuItems) باستخدام أساليب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>