Alignment of label to the left of material UI select not working as expected

0
votes

I was trying to left align a label for a select built using Material UI This causes the label to go outside the formControl so as to get it aligned to the left. Is there a better way to get it done so that label remains within formControl? I do not see an option like labelPLacement for InputLabel and FormControlLabel does not seem to work with Select.

https://codesandbox.io/s/material-demo-forked-kbyxf?file=/demo.js

const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120
  },
  selectEmpty: {
    marginTop: theme.spacing(2)
  },
  divcontrol: {
    display: "inline-block"
  },
  label: {
    display: "inline-block",
    marginTop: "24px"
  }
}));

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

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

  return (
    <div className={classes.divcontrol}>
      <InputLabel className={classes.label} id="demo-simple-select-label">
        Age
      </InputLabel>
      <FormControl className={classes.formControl}>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          onChange={handleChange}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}
1
reactjsmaterial-ui

1 Answers

0
votes

You can use flex to align label:

const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120
  },
  selectEmpty: {
    marginTop: theme.spacing(2)
  },
  divcontrol: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center"
  },
  label: {
    display: "flex",
  }
}));

Here is a live example:

Edit Material demo (forked)