Vertically aligning the button with the TextField in React Material-UI

5
votes

I am using the Material-UI library for React. I am trying to make a simple form that looks like:

enter image description here

However, I can't figure out how to align the button with the TextField. I tried changing the margin-top but it increases the margin of the entire wrapper. Below is the code sandbox for it.

Any tips on getting this fixed?

https://codesandbox.io/embed/material-demo-y5eg7?fontsize=14&hidenavigation=1&theme=dark

2
cssreactjsmaterial-ui

2 Answers

1
votes

In your styles.css file you can add {position: relative; top: 10px} to the small-button className then adjust the top value until you are happy with the position alternatively you might be able to wrap the row in a div and use {display:flex; flex-direction:row; justify-content:center;} to align them all.

0
votes

Change the below styles in styles.css

.horizontal-form { /* This is newly added style */
  display: flex;
  align-items: center;
}

.input-text-wrapper {
  /* margin-bottom: 1.2em; */ /* comment these styles */ 
}

.input-text-wrapper-small {
  width: 33%;
  /* margin-bottom: 1.2em; */
  display: inline-block;
}

.small-button {
  width: 10%;
  /* display: inline-flex;
  align-items: center; */
}

jsx

Remove the small-button div from inside the input-text-wrapper div and Then Enclose the input-text-wrapper div and small-button div inside a newly created horizontal-form div

...
</Typography>
<div className="horizontal-form">
   <div className="input-text-wrapper">
      <div className="input-text-wrapper-small">
         ...
      </div>
      <div className="input-text-wrapper-small">
         ...
      </div>
      <div className="input-text-wrapper-small">
         ...
      </div>
   </div>
   <div className="small-button">
      <Button variant="contained" color="primary">
      Add
      </Button>
   </div>
</div>
</CardContent>
....