सामग्री-यूआई स्वत: पूर्ण घटक का विस्तार करने पर ड्रॉपडाउन अपेक्षा के अनुरूप खुलता है। हालांकि एक बार इसे खोलने के बाद और मैं इसे स्वत: पूर्ण बॉक्स के नीचे स्थित रहने के बजाय स्क्रॉल करता हूं। मैंने पाया कि यह व्यवहार सामग्री ui के उस संस्करण के लिए तय किया जाना चाहिए जिसका मैं उपयोग करता हूं as यहां बताया गया है। मैंने यह भी परीक्षण किया कि सैंडबॉक्स पर एक सादे नए प्रोजेक्ट के लिए, जहां इसने ठीक काम किया।

इसलिए, मैं अनिच्छा से कुछ महत्वपूर्ण स्टाइल सेटिंग्स को अधिलेखित करने की अपेक्षा करता हूं लेकिन गलती का पता नहीं लगा सका। कोई उपाय जहां मैं देख सकता था?

प्रासंगिक कोड स्निपेट के बाद:

The component where I render the Autocomplete component
const useStyles = makeStyles(theme => ({
...,
  vinBox: {
    width: 320,
    marginTop: "4px"
  }
}));
...
return (
    <Autocomplete
      id="vin-selection"
      options={allVehicleVins}
      className={classes.vinBox}
      onChange={(event, data) => setFilter({ ...filter, vin: data })}
      value={filter.vin}
      renderInput={params => (
        <TextField
          {...params}
          margin={"normal"}
          label="VIN"
          variant="standard"
          InputProps={{
            ...params.InputProps,
            startAdornment: (
              <InputAdornment position="start">
                <DirectionsCar />
              </InputAdornment>
            )
          }}
          helperText={
            "Choose a VIN to filter for specific vehicles of your fleet."
          }
          fullWidth
        />
      )}
    />
  );
};

मैंने क्रोम संस्करण 80.0.3987.149 का उपयोग किया (हालांकि अन्य ब्राउज़रों में भी हुआ)। मेरी कुछ निर्भरताएँ:

...
"@material-ui/core": "^4.8.2",
"@material-ui/icons": "^4.5.1",
"@material-ui/lab": "^4.0.0-alpha.35",
"react": "^16.12.0",
...

example of badly positioned dropdown

1
phlprcks 31 मार्च 2020, 16:08

1 उत्तर

सबसे बढ़िया उत्तर

ठीक है, व्यापक परीक्षण के बाद मुझे अपनी त्रुटि मिली। मेरे पास src फोल्डर में एक index.css राइट है। वहां मेरे पास निम्नलिखित स्टाइल है:

body {
  ...
  overflow-y: scroll;
  ...
} 

इसे बदलना चाल है। उम्मीद है कि इसे पढ़ने में किसी की मदद करता है :)

0
phlprcks 1 अप्रैल 2020, 10:20