Bootstrap button inside input-group

Question

How to make it so that it appears nicely after input page with same height?

<div class="input-group">         <input type="text" class="form-control"/>         <button class="input-group-addon" type="submit">             <i class="fa fa-search"></i>         </button> </div> 

Here is code http://jsfiddle.net/6mcxdjdr/ The first one is original input-group, the second one is something what I am trying to have

Answer 1

If you follow bootstrap's documentation:

<div class="input-group">   <input type="text" class="form-control" placeholder="Search for...">   <span class="input-group-btn">     <button class="btn btn-default" type="submit">         <i class="fa fa-search"></i>     </button>   </span> </div> 

Answer 2

here is my solution, using a little CSS to position the button to the right of the input field by adding position: absolute and a z-index:

button.input-group-addon {   position: absolute;   right: -38px;   top: 0;   padding: 2px;   z-index: 999;   height: 34px;   width: 38px; } 

http://jsfiddle.net/6mcxdjdr/1/

Another idea is to manipulate the form submit with javascript, so you dont have to create your own button but submit the form by clicking on the bootstrap span. This could be done by $('.input-group-addon').click(function(){ $('#myform').submit(); });