Material UI dropdown/autocomplete - css

Question

When trying to put a label with a dropdown in material UI for some reason I am seeing this behavior
For some reason I can't make them aligned at the same row.
This is my component:
const useStyles = makeStyles(theme => ({
root: {
justifyContent: 'center',
display: 'flex',
},
formControl: {
margin: theme.spacing(1),
minWidth: 120,
},
selectEmpty: {
marginTop: theme.spacing(2),
},
}));
function DutPreferencesTab(props) {
const classes = useStyles()
const {data} = props
console.log(data)
const [age, setAge] = React.useState('');
const handleChange = (event) => {
setAge(event.target.value);
};
return (
<div style={{display: 'flex', direction: 'row'}}>
<CustomLabel text={'Relay:'} variant={"subtitle1"} />
<FormControl className={classes.formControl}>
<InputLabel id="demo-simple-select-label">Age</InputLabel>
<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>
)
}
CustomLabel.js
import React from 'react'
import Typography from '#material-ui/core/Typography';
import clsx from 'clsx';
function CustomLabel({text, variant, styles}) {
return (
<div className={clsx(styles)}>
<Typography variant={variant} gutterBottom>
{text}
</Typography>
</div>
)
}
export default CustomLabel
I tried everything but still I can't make them align at the same row and I can't figure our why. It appears to only happen with dropdowns as far as I saw. I have other texts that are perfectly aligned with the label.
Am I missing something?

Answer 1

If you highlight the elements in dev tools, you will see that they are aligned. The problem is just that the Select is much taller than the label and by default the tops of the elements are aligned (actually the elements are stretched to be the same height, but this has the effect of lining them up at the top).
When you select an item and the label in the Select (e.g. "Age") moves up, you can more easily see why it is so tall.
The solution is to modify the align-items CSS property on the div that wraps the label and the select. A value of baseline seems to be the best option in this case.
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import FormControl from "#material-ui/core/FormControl";
import InputLabel from "#material-ui/core/InputLabel";
import Select from "#material-ui/core/Select";
import MenuItem from "#material-ui/core/MenuItem";
import CustomLabel from "./CustomLabel";
const useStyles = makeStyles((theme) => ({
root: {
alignItems: "baseline",
display: "flex"
},
formControl: {
margin: theme.spacing(1),
minWidth: 120
}
}));
export default function DutPreferencesTab(props) {
const classes = useStyles();
const [age, setAge] = React.useState("");
const handleChange = (event) => {
setAge(event.target.value);
};
return (
<div className={classes.root}>
<CustomLabel text={"Relay:"} variant={"subtitle1"} />
<FormControl className={classes.formControl}>
<InputLabel id="demo-simple-select-label">Age</InputLabel>
<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>
);
}
Related Flexbox resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/#align-items