CODEWITHSUNDEEP
htmlcss
nCardot
nCardot

Reputation: 6587

Match button size with adjacent input box

I created a to-do list with jQuery (see CodePen). I wanted the '+' button to be joined with the input box in which you add a to-do list item and for the two to be the same height.

Getting the button to match took a lot of trial and error with the padding. Setting its height to 1.5em to match the input box didn't work, even after setting it to box-sizing: border-box.

Is there a more efficient, accurate way to achieve this?

Here is the relevant CSS:

input[type=text] {
  border: 1px solid #ccc;
  height: 1.6em;
  width: 28.23em;
  color: #666;
  height: 1.5em;
}

.button {
  /* Needed to display button next to input box */
  display: inline-block;
  vertical-align: bottom;
  box-shadow: inset 0px 1px 0 0 #fff;
  /* Starts at top, transitions from left to right */
  background: linear-gradient(#f9f9f9 5%, #e9e9e9 100%);
  border: 1px solid #ccc;
  font-size: 0.7em;
  font-weight: bold;
  /* First value sets top and bottom padding; second value sets right and left */
  padding: 0.53em 0.7em;
  text-shadow: 0 1px #fff;
  text-align: center;
  color: grey;
}

And HTML:

<form name="listForm">
  <input type="text" name="listItem"/ placeholder="Add new">
</form><!-- Comment removes gap between inline-block elements
--><button class="button">+</button>

Upvotes: 1

Views: 1195

Answers (2)

Hooman Bahreini
Hooman Bahreini

Reputation: 15559

If you are using bootstrap, you can achieve this using input-group, please see: Bootstrap 4 input groups

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Add new" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">+</button>
  </div>
</div>

If you want to implement it yourself, you need to put the input and button inside the form. To set their height to be equal, you can set the height of the button to be equal to the height input (1.6 em) + padding of the input (1px top + 1px bottom = 2px):

input[type="text"] {
  border: 1px solid #ccc;
  height: 1.6em;
  width: 28.23em;
  color: #666;
}

button.button {
    margin-left: -30px;
    height: -webkit-calc(1.6em + 2px);
    height: calc(1.6em + 2px);
    width:25px;
    color: grey;
    border:none;
}
<form name="listForm">
  <input type="text" name="listItem" placeholder="Add new">
  <button class="button">+</button>
</form>

Upvotes: 1

Jatinder Kumar
Jatinder Kumar

Reputation: 513

reduce the width of the input by 1 em. And set button to float right, It should work.

Upvotes: 0

Related Questions