i am trying to align different Material UI select components in my application.
in the image you can see that the components are not aligned.
how can i give these components the same style, so that they line up next to each other.
This is the code that i'm using for the button that is not on the same line as the other components(see image):
import React, { useEffect, useState, FunctionComponent, useRef, useCallback } from 'react'
import { Toolbar, Snackbar, Box, Grid, TextField, Select, MenuItem, Button, FormControl, InputLabel, Checkbox, Input, ListItemText } from '@material-ui/core'
import { RouteComponentProps } from '@reach/router'
import { useStyles } from '../Common/Style.css'
import ChartElement from '../Components/Chart'
const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
PaperProps: {
style: {
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
width: 250,
},
},
};
<FormControl className={classes.formControl}>
<InputLabel id="demo-mutiple-checkbox-label">kerk</InputLabel>
<Select
labelId="demo-mutiple-checkbox-label"
id="demo-mutiple-checkbox"
multiple
value={personName}
onChange={onChangeKerk}
input={<Input />}
renderValue={(selected) => (selected as string[]).join(', ')}
MenuProps={MenuProps}
>
{churches.map((name) => (
<MenuItem key={name} value={name}>
<Checkbox checked={personName.indexOf(name) > -1} />
<ListItemText primary={name} />
</MenuItem>
))}
</Select>
</FormControl>
this is the code that i'm using for the buttons that are on one line with the others(see image):
<TextField
id="Startdatum"
label="Startdatum"
onChange={onChangeStartDatum}
defaultValue={startDatum}
type="date"
InputLabelProps={{
shrink: true,
}}
/>
<TextField
id="Einddatum"
label="Einddatum"
onChange={onChangeEindDatum}
defaultValue={eindDatum}
type="date"
InputLabelProps={{
shrink: true,
}}
/>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="age-native-simple">Maanden</InputLabel>
<Select
native
value={currentOption}
onChange={onChangeFixedDate}
inputProps={{
name: 'age',
id: 'age-native-simple',
}}
>
<option value={"All"}>All</option>
<option value={"3 months"}>3 months</option>
</Select>
</FormControl>
update after adding grids to code:
<Grid justify="center" alignItems="center" direction="row">
<Toolbar className={classes.toolbar}>
<Grid item lg={6} md={12} xs={12}>
<h4 className={classes.title}>{"DASHBOARD"}</h4>
</Grid>
<Grid item lg={1} md={12} xs={12}>
<FormControl className={classes.formControl}>
<Select
labelId="demo-mutiple-checkbox-label"
id="demo-mutiple-checkbox"
multiple
value={churchName}
onChange={onChangeChurch}
input={<Input />}
renderValue={(selected) => (selected as string[]).join(', ')}
MenuProps={MenuProps}
>
{churches.map((name) => (
<MenuItem key={name} value={name}>
<Checkbox checked={churchName.indexOf(name) > -1} />
<ListItemText primary={name} />
</MenuItem>
))}
</Select>
</FormControl>
</Grid>
<Grid item lg={12} md={12} xs={10}>
<TextField
id="Startdatum"
label="Startdatum"
onChange={onChangeStartDatum}
value={startDatum}
type="date"
InputLabelProps={{
shrink: true,
}}
/>
<TextField
id="Einddatum"
label="Einddatum"
onChange={onChangeEindDatum}
value={eindDatum}
type="date"
InputLabelProps={{
shrink: true,
}}
/>
</Grid>
<Grid item lg={8} md={12} xs={12}>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="age-native-simple">Maanden</InputLabel>
<Select
native
value={currentOption}
onChange={onChangeFixedDate}
inputProps={{
name: 'age',
id: 'age-native-simple',
}}
>
<option value={"All"}>All</option>
<option value={"3 months"}>3 months</option>
</Select>
</FormControl>
</Grid>
{/*<Button id="refresh" onClick={onClick} variant="contained" color="primary">
↺
</Button>*/}
</Toolbar>
</Grid>
My components now look like this:(see image)
after some adjustment to the width en height, i still can't get the component on the left in lign with the others. Any idea how to fix this?
