'How to align a Material UI Button and TextField on the same line, at same height?

I'm trying to get a <Button> from the Material UI library to a) sit at same height as the <TextField> next to it; and b) have it be aligned with that same field.

Both the <Button> and the <TextField> are each inside their own <Grid> component (with a container wrapping them).

The container <Grid> has the prop alignItems="center", which produces this result: enter image description here

It's here I'm running into difficult trying to get the height of the <Button> to match that of the input field. This must be a relatively common requirement - is there a simple way of achieving this?

cssreactjsmaterial-ui


Solution 1:[1]

Given that you have each of your element in a <Grid> component themselves, this should work:

https://codesandbox.io/s/material-ui-playground-forked-1yymw?file=/app.jsx

Solution 2:[2]

Use container={true} for Grid to set it as a flex container. Aside from that, you can always leverage makeStyles to generally customize the components' style

MUI Grid container prop

If true, the component will have the flex container behavior.

const useStyles = makeStyles({
  fullHeightButton: {
    height: "100%"
  }
});

function App() {

  const classes = useStyles();

  return (
    <React.Fragment>
      <Grid container={true}>
        <TextField variant="outlined"/>
        <Button variant="contained" color="primary">+</Button>
      </Grid>
      
      <br/>
      
      <Grid container={true}>
        <Grid><TextField variant="outlined"/></Grid>
        <Grid><Button classes={{root: classes.fullHeightButton}} variant="contained" color="primary">+</Button></Grid>
      </Grid>
    </React.Fragment>
  );
}

ReactDOM.render(<App/>, document.getElementById("test"));
<body>
  <div id="test"></div>
  
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>

  <script type="text/babel">
    const { Button, Grid, makeStyles, TextField } = MaterialUI;
  </script>
</body>

Solution 3:[3]

In my case, I had two buttons that sandwiched a TextField, where the spacing between the first button and the textfield was wrong as shown:

Buttons before code addition

My code was:

  <CardActions className='cardactions'>
    <Button variant='contained' color='error'> - </Button>
    <TextField id='outlined-basic' variant='outlined' size='small' type='number' label='Enter Quantity'/>
    <Button variant='contained' color='success'>+</Button>
  </CardActions>

Adding sx={{ marginRight:1}} to the first button corrected the issue.

Buttons after code addition

Code after addition:

  <CardActions className='cardactions'>
    <Button variant='contained' color='error' sx={{ marginRight:1}}> - </Button>
    <TextField id='outlined-basic' variant='outlined' size='small' type='number' label='Enter Quantity'/>
    <Button variant='contained' color='success'>+</Button>
  </CardActions>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Luca Faggianelli
Solution 2
Solution 3 Nick

Related Questions