Having an issue with the dropdown position when using select from material UI. It's not appearing in the correct location.
Desired Dropdown Position:
https://i.sstatic.net/arRIF.png
Current Dropdown Position:
when opening the dropdown
https://i.sstatic.net/nQ570.png
The dropdown is displaying in the center of its field instead of below it as expected. I have researched and found that the default setting should position the dropdown below its field, but this is not happening in my case.
Code for the dropdown:
<div className="row-5" style={{ marginTop: "21px" }}>
<div className="repeat">
<FormControl variant="standard" sx={{ m: 1, minWidth: 120 }}>
<InputLabel id="repeat-id">Repeat</InputLabel>
<Select
style={{ width: '420px' }}
labelId="repeat-id"
id="demo-simple-select-standard"
// value={age}
// onChange={handleChange}
label="Repeat"
defaultValue="Never"
>
<MenuItem value="Never">
Never
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</div>
</div>