CODEWITHSUNDEEP
htmlcss
Dan
Dan

Reputation: 7734

Aligning components in forms

This is probably something I rather simple I am missing but in my form, I have an input of type = "password" and a button of type = button next to each other. After I managed to initially line everything up I decided to set the height to the same height for both components

I expected the outcome to look like this.

enter image description here

When I used the code below. However when you run the code below you will see the heights are different.

input[type="password"] {
  float: left;
  margin: 0px 0px 0px 2vw;
  width: 150px;
  height: 50px;
  display: inline-block;
}

.form-ckbx {
  display: inline-block;
  width: 150px;
  height: 50px;
}
<form>
  <input type="password" class="form-inp" id="password" placeholder="Password">
  <button type = "button" class = "form-ckbx" id = "check" title="Show Password">Some Text</button>
</form>

How am I able to fix this problem?

Note
I am aware of similar question such as this and this but the solutions seem to be ineffective in this case.

Upvotes: 1

Views: 63

Answers (5)

EddNewGate
EddNewGate

Reputation: 537

Use this CSS property box-sizing: border-box and will work as you expected.

#password {
  float: left;
  margin: 0px 0px 0px 2vw;
  width: 150px;
  height: 50px;
  display: inline-block;
  font-size:100%;
  box-sizing: border-box;
  
}

.form-ckbx {
  display: inline-block;
  width: 150px;
  height: 50px;
}
<form>



  <input type="password" class="form-inp" id="password" placeholder="Password">
  <button type = "button" class = "form-ckbx" id = "check" title="Show Password">Some Text</button>

</form>

Upvotes: 1

Mathias W
Mathias W

Reputation: 1521

Input fields has by default a 1px padding as well as a 1 pixel border hence causing an additional 4px height. So try reset the input padding and adjust the button height in order to accommodate for the difference.

input[type="password"] {
  float: left;
  margin: 0px 0px 0px 2vw;
  width: 150px;
  height: 50px;
  padding:0;
  display: inline-block;
}

.form-ckbx {
  display: inline-block;
  width: 150px;
  height: 54px;
}
<form>
  <input type="password" class="form-inp" id="password" placeholder="Password">
  <button type = "button" class = "form-ckbx" id = "check" title="Show Password">Some Text</button>
</form>

Upvotes: 2

PedroNeves
PedroNeves

Reputation: 110

I don't know why but when i copied your code to my computer to test it out it worked... Try change the input[type="password"] to .form-inp

Upvotes: 0

Robert
Robert

Reputation: 10390

input[type="password"] {
  float: left;
  margin: 0px 0px 0px 2vw;
  width: 150px;
  height: 50px;
  display: inline-block;
  border: 0;
 outline: none;
}

.form-ckbx {
  display: inline-block;
  width: 150px;
  height: 50px;
}
<form>
  <input type="password" class="form-inp" id="password" placeholder="Password">
  <button type = "button" class = "form-ckbx" id = "check" title="Show Password">Some Text</button>
</form>

Upvotes: 2

Robin Panta
Robin Panta

Reputation: 224

This is due to some paddings, border and outline in the inputbox, try increasing height to something like 60px;

input[type="password"] {
  float: left;
  margin: 0px 0px 0px 2vw;
  width: 150px;
  height: 50px;
  display: inline-block;
}

.form-ckbx {
  display: inline-block;
  width: 150px;
  height: 60px;
}
<form>
  <input type="password" class="form-inp" id="password" placeholder="Password">
  <button type = "button" class = "form-ckbx" id = "check" title="Show Password">Some Text</button>
</form>

Upvotes: -1

Related Questions