Aligning input field and buttons

Question

I'm trying to align two buttons to ad input field but I end up messing everything every single time.
I've already aligned an input field to a single button, but I'm not able to add a second button.

This is the html (I'm using some angularjs):

<div class="row">
    <div class="col-lg-12">
        <form class="form" ng-submit="vm.reCreateTree(ricercaSecondario)" ng-init="aggiornaRicercaPratica()">
            <div class="input-group">                               
                <input type="text" ng-model="vm.cercaSecondario" class="form-control" placeholder="{{getTestoPlaceholderRicerca(ricercaPraticaSecondario)}}" required="required" ng-disabled="disabilitaRicercaSecondaria()">
                   <div class="input-group-btn">
                       <button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>  
                       <button class="btn btn-default" type="submit"
                            tooltip="Espandi filtri di ricerca" tooltip-placement="bottom"
                            ng-click="toggleRicerca()" ng-show='user.ambitoSelezionato.nome == "Clienti-Polizze"'>
                       <i ng-class="{'fa fa-caret-up': showEspandiRicerca, 'fa fa-caret-down': !showEspandiRicerca}"></i>
                       </button>
                  </div>    
           </div>                            
        </form>
    </div>
</div>

This is a screenshot of the result:

As you can see the two button are not in the same line as the input field and they are also uneven (speaking about dimensions)...
Any help?!

UPDATE: updated the code (thanks to Mukesh Ram) but the buttons still have two different sizes..

You can use Bootstrap's grid system and input groups cto align in single line with same width. — Ravimallya
– Ravimallya, Commented Jul 15, 2016 at 9:01
So you need to search icon and arrow icon button have some width? Right? — Mukesh Ram
– Mukesh Ram, Commented Jul 15, 2016 at 9:41

Mukesh Ram · Accepted Answer · 2016-07-15 09:10:07Z

1

You can have multiple buttons inside a single .input-group-btn. Like this:

<div class="col-lg-6"> 
    <div class="input-group">
       <input type="text" class="form-control" aria-label="Text input with multiple buttons"> 
       <div class="input-group-btn"> <!-- add button in this div -->
         <button type="button" class="btn btn-default" aria-label="Help">
            <span class="glyphicon glyphicon-question-sign"></span>
         </button>
         <button type="button" class="btn btn-default">Action</button> 
      </div>
   </div>
</div>

answered Jul 15, 2016 at 9:10

Mukesh Ram

6,3684 gold badges21 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Leon Over a year ago

I'm upvoting this because you solved half of my problem. The buttons still have two different sizes...

Mukesh Ram Over a year ago

So, you have to fixed the width of buttons. Like this: .form .input-group-btn button{ width:39px;}

Leon Over a year ago

I don't use css and there are other input-group-btn so I can't place it in header. Isn't there a property that takes care of the width of the buttons?!

BENARD Patrick · Accepted Answer · 2016-07-15 09:16:04Z

1

One other way :
form-inline and form-group

Bootply : http://www.bootply.com/uHEpGIOLwY

 <div class="row">
      <div class="col-lg-12">
        <form class="form-inline" ng-submit="vm.reCreateTree(ricercaSecondario)" ng-init="aggiornaRicercaPratica()">
          <div class="form-group">
            <input type="text" ng-model="vm.cercaSecondario" class="form-control" placeholder="{{getTestoPlaceholderRicerca(ricercaPraticaSecondario)}}" required="required" ng-disabled="disabilitaRicercaSecondaria()">
            <button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
            <button class="btn btn-default" type="submit" tooltip="Espandi filtri di ricerca" tooltip-placement="bottom" ng-click="toggleRicerca()" ng-show='user.ambitoSelezionato.nome == "Clienti-Polizze"'>
              <i ng-class="{'fa fa-caret-up': showEspandiRicerca, 'fa fa-caret-down': !showEspandiRicerca}"></i>
            </button>
          </div>
        </form>
      </div>
    </div>

answered Jul 15, 2016 at 9:16

BENARD Patrick

31k16 gold badges104 silver badges109 bronze badges

1 Comment

BENARD Patrick Over a year ago

I've a preference for @MukeshRam answer... But just for the diversity of answers, I post this one....

Collectives™ on Stack Overflow

Aligning input field and buttons

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related