MUI Select - Change Select size

Question

whilst using the selects from MUI, I'm struggling to get them working properly using a height and width with 'vh' and 'vw' appropriately and a text-size using 'vh'.

I end up having a proper size for the boxes, but the label text is not centered anymore due to apparently using a 'transform' to offset itself from the top left corner.

Anyway, here's what I have: https://codesandbox.io/s/material-demo-ujz2g

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 FormHelperText from "@material-ui/core/FormHelperText";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

const useStyles = makeStyles(theme => ({
  formControl: {
    margin: theme.spacing(1),
    width: "20vw"
  },
  selectEmpty: {
    marginTop: theme.spacing(2)
  },
  select: {
    height: "10vh"
  },
  inputLabel: {
    fontSize: "4vh",
    alignSelf: "center"
  }
}));

export default function SimpleSelect() {
  const classes = useStyles();
  const [age, setAge] = React.useState("");

  const inputLabel = React.useRef(null);
  const [labelWidth, setLabelWidth] = React.useState(0);
  React.useEffect(() => {
    setLabelWidth(inputLabel.current.offsetWidth);
  }, []);

  const handleChange = event => {
    setAge(event.target.value);
  };

  return (
    <div>
      <FormControl variant="outlined" className={classes.formControl}>
        <InputLabel
          className={classes.inputLabel}
          ref={inputLabel}
          id="demo-simple-select-outlined-label"
        >
          Age
        </InputLabel>
        <Select
          className={classes.select}
          labelId="demo-simple-select-outlined-label"
          id="demo-simple-select-outlined"
          value={age}
          onChange={handleChange}
          labelWidth={labelWidth}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
      <FormControl variant="filled" className={classes.formControl}>
        <InputLabel id="demo-simple-select-filled-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-filled-label"
          id="demo-simple-select-filled"
          value={age}
          onChange={handleChange}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

 const { makeStyles, InputLabel, MenuItem, FormHelperText, FormControl, Select } = MaterialUI; const useStyles = makeStyles(theme => ({ formControl: { margin: theme.spacing(1), width: "20vw" }, selectEmpty: { marginTop: theme.spacing(2) }, select: { height: "10vh" }, inputLabel: { fontSize: "4vh", alignSelf: "center" } })); function SimpleSelect() { const classes = useStyles(); const [age, setAge] = React.useState(""); const inputLabel = React.useRef(null); const [labelWidth, setLabelWidth] = React.useState(0); React.useEffect(() => { setLabelWidth(inputLabel.current.offsetWidth); }, []); const handleChange = event => { setAge(event.target.value); }; return ( <div> <FormControl variant="outlined" className={classes.formControl}> <InputLabel className={classes.inputLabel} ref={inputLabel} id="demo-simple-select-outlined-label" > Age </InputLabel> <Select className={classes.select} labelId="demo-simple-select-outlined-label" id="demo-simple-select-outlined" value={age} onChange={handleChange} labelWidth={labelWidth} > <MenuItem value=""> <em>None</em> </MenuItem> <MenuItem value={10}>Ten</MenuItem> <MenuItem value={20}>Twenty</MenuItem> <MenuItem value={30}>Thirty</MenuItem> </Select> </FormControl> <FormControl variant="filled" className={classes.formControl}> <InputLabel id="demo-simple-select-filled-label">Age</InputLabel> <Select labelId="demo-simple-select-filled-label" id="demo-simple-select-filled" value={age} onChange={handleChange} > <MenuItem value=""> <em>None</em> </MenuItem> <MenuItem value={10}>Ten</MenuItem> <MenuItem value={20}>Twenty</MenuItem> <MenuItem value={30}>Thirty</MenuItem> </Select> </FormControl> </div> ); } ReactDOM.render(<SimpleSelect />, document.querySelector('#root'));

 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> <script src="https://unpkg.com/react@17/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/@material-ui/core@4/umd/material-ui.production.min.js"></script> <div id="root"></div>

EDIT: the odd behavior is especially visible when zooming in and out - the label itself moves within the dropdown.

Answer 1

Try using size="small" attribute on FormControl

<FormControl variant="filled" size="small">
    <InputLabel id="demo-simple-select-filled-label">Age</InputLabel>
    <Select
      labelId="demo-simple-select-filled-label"
      id="demo-simple-select-filled"
      value={age}
      onChange={handleChange}
    >
      <MenuItem value="">
        <em>None</em>
      </MenuItem>
      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>
</FormControl>

Answer 2

Instead of declaring FormControl , InputLabel and Select manually and pass the size props to FormControl , you should create a selectable TextField and change the TextField size props.

It's the same as if you define a Select and FormControl but with better integration . Here is a minimal example:

<TextField select size='small' {...}>
  {names.map((name) => (
    <MenuItem key={name} value={name}>
      {name}
    </MenuItem>
  ))}
</TextField>

Live Demo

Answer 3

You need to create a file mystyle.css and add the following entry in it. And finally import mystyle.css in your demo.js .

.MuiInputLabel-outlined {
  transform: translate(12px, 14px) scale(1) !important;
}

.MuiInputLabel-outlined.MuiInputLabel-shrink {
  transform: translate(12px, -6px) scale(0.75) !important;
}

Working demo : link

Answer 4

Try using style attribute on Select

<Select
  labelId="demo-simple-select-filled-label"
  id="demo-simple-select-filled"
  value={age}
  onChange={handleChange}
  style={{ height: 30 }}
>
  <MenuItem value="">
    <em>None</em>
  </MenuItem>
  <MenuItem value={10}>Ten</MenuItem>
  <MenuItem value={20}>Twenty</MenuItem>
  <MenuItem value={30}>Thirty</MenuItem>
</Select>