Material-UI - Apply max-height to Select children
The height that you want to control is the Paper
element rendered by the Popover
element within Menu
.
The default styles are maxHeight: 'calc(100% - 96px)'
.
Below is one example of how to override this in v4 of Material-UI (v5 example further down):
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
const useStyles = makeStyles(theme => ({
formControl: {
margin: theme.spacing(1),
minWidth: 120
},
selectEmpty: {
marginTop: theme.spacing(2)
},
menuPaper: {
maxHeight: 100
}
}));
const VALID_NOTES = [
"C",
"C#",
"D",
"D#",
"E",
"F",
"F#",
"G",
"G#",
"A",
"A#",
"B"
];
export default function SimpleSelect() {
const classes = useStyles();
const [note, setNote] = React.useState("");
const handleChange = event => {
setNote(event.target.value);
};
return (
<div>
<FormControl className={classes.formControl}>
<InputLabel id="demo-simple-select-label">Note</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={note}
onChange={handleChange}
MenuProps={{ classes: { paper: classes.menuPaper } }}
>
{VALID_NOTES.map(validNote => (
<MenuItem value={validNote}>{validNote}</MenuItem>
))}
</Select>
</FormControl>
</div>
);
}
The key aspect being MenuProps={{ classes: { paper: classes.menuPaper } }}
and the definition of the menuPaper
styles.
Below is a similar example, but for v5 of Material-UI. This example leverages the new sx
prop for the styling.
import React from "react";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
const VALID_NOTES = [
"C",
"C#",
"D",
"D#",
"E",
"F",
"F#",
"G",
"G#",
"A",
"A#",
"B"
];
export default function SimpleSelect() {
const [note, setNote] = React.useState("");
const handleChange = (event) => {
setNote(event.target.value);
};
return (
<div>
<FormControl sx={{ m: 1, minWidth: 120 }} variant="standard">
<InputLabel id="demo-simple-select-label">Note</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={note}
onChange={handleChange}
MenuProps={{ PaperProps: { sx: { maxHeight: 100 } } }}
>
{VALID_NOTES.map((validNote) => (
<MenuItem value={validNote}>{validNote}</MenuItem>
))}
</Select>
</FormControl>
</div>
);
}
How to style react material ui select component height
Use the SelectDisplayProps
prop. You can also pass down className
or classes
to make this work.
const { Select, MenuItem } = MaterialUI
function App() {
return (
<div>
<Select
SelectDisplayProps={{ style: { paddingTop: 8, paddingBottom: 8 } }}
variant="outlined"
style={{ width: 300 }}
multiple
value={[]}
renderValue={(selected) => selected.join(", ")}
>
<MenuItem value="">
<em>Select</em>
</MenuItem>
</Select>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'))
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<div id="root"></div>
How do I make Material UI's TextField dropdown selector open with a limited size of items?
You can try adding a maxHeight property to the SelectProps of the textfield component. Also, I believe you should rather use an MUI autocomplete if you want autocompletion and dropdown both.
Related Topics
CSS Background Color Extend as Far as Text
How to Get The System Accent Color for Uwp-Apps
How to Change The Scrollbar to Custom Design? (Avoid Using The Default Browser Look)
Use an Image Instead of a Bootstrap's Glyphicon
Vertical Line with Dots in Ends and Between
Firefox Add's 2Px Padding in a Submit Button
Borderradius Style Property Not Rounding The Edges in Reactjs
How to Style a Svg Using CSS in Javafx Fxml
Ie7 Cause of "Text - Empty Text Node"
Unnoticeable Lesscss Compiler in Eclipse Pdt
Firefox Displaying Table-Cell Incorrectly (Chrome Working Good)
Which Monospace Font Does a Browser Use
Why Does an Inline-Block Div Get Positioned Lower When It Has Content
How to Remove The Styles from The Pseudo Element -Internal-Input-Suggested
CSS Color Rendering Different in Safari
Why Border of <Th> and <Thead> Both Not Showing Here
Media Query to Differentiate Desktop from iPad in Landscape Mode