9

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

3 Answers 3

2

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.

2

Just replace this line

<div className="input-text-wrapper">

with

<div className="input-text-wrapper" style={{display:"flex", alignItems:"center"}} >

AND remove margin-bottom from your style.css

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

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>
....
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.