I have a Material-UI Box with 2 components inside: a TextField that acts as a Select with a menu created with MenuItems, and a button below this TextField that deletes the selected content in the select. The problem is that without placing the button, the menu of the Select component does appear correctly vertically, but adding the button below this component causes the menu to display horizontally.
Select with button Layout with button
<Box sx={{ position: "absolute", top: "57%", left: "13%", width: "11%" }}>
<TextField
select
variant="outlined"
label="Bebida 1"
fullWidth
name="pos1"
value={cocktails.pos1}
onChange={handleSelectChange}
SelectProps={{
MenuProps: {
anchorOrigin: {
vertical: "bottom",
horizontal: "left"
},
transformOrigin: {
vertical: "top",
horizontal: "left"
},
getContentAnchorEl: null
}
}}
>
{allDrinks.map(drink => (
<MenuItem key={drink} value={drink}>{drink}</MenuItem>
))}
</TextField>
{cocktails.pos1 !== "" &&
<Box sx={{ position: "absolute", left: "30%", alignItems: "center", align: "center" }}>
<IconButton color="secondary" aria-label="Eliminar bebida"
onClick={(e) => {
e.preventDefault();
handleRemove('remove_pos1')
}}
>
<Icon style={{ fontSize: "2vw" }}>highlight_off</Icon>
</IconButton>
</Box>
}
I repeat this with 6 Select componenets and 6 buttons, and with only adding one button all of the select menu change to vertical.
Is there a way to display the Select menu vertically, so that it is above the button?
Are you importing your components only from the @mui/material/ package or using material and core packages together?
If you are trying to import some of them from core package and some of them from material package, they distort each other. I've had a very similar problem and I solved it importing all of them (Box, Button and TextField) from mui material package and taking core package out.