CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Zbynek
Zbynek

Reputation: 5955

Bootstrap 3: multiple select in input-group overlap

I have a problem joining multiple select tags into .input-group.

Here is my code:

<form class="form-horizontal" role="form">
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                      <label class="control-label col-md-6" >Label 1</label>
                      <div class="col-md-6">
                        <select class="form-control">
                        </select>  
                      </div>
                    </div>
                </div>              
                <div class="col-md-6">  
                    <div class="form-group">
                      <label class="control-label col-md-6" >Label 2</label>
                      <div class="col-md-6">
                        <select class="form-control" >
                        </select>  
                      </div>
                    </div>                  
                </div>              
            </div>
        <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                      <label class="control-label col-md-6">Label 3</label>
                      <div class="input-group col-md-6">
                        <span class="input-group-btn">
                                <select class="form-control">
                            </select>
                            </span>
                            <span class="input-group-btn">
                                <select class="form-control">
                            </select>
                            </span>
                            <span class="input-group-btn">
                                <select class="form-control">
                            </select>
                            </span>              
                      </div>
                    </div>
                </div>                          
            </div>
        </form>

The problem is as follows:

In the last form-group, after the Label 3, three span's with select inside them have higher width then they should have and they overlap to the right and left of their input-group container (about 15 px).

Here is jsfiddle demostrating the problem (just click on first or third select in the last row)

Upvotes: 1

Views: 6495

Answers (3)

Anil Panwar
Anil Panwar

Reputation: 2622

Made another div for using class="form-group", See DEMO on full page mode in snippet 

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<form class="form-horizontal" role="form">
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <label class="control-label col-md-6">Label 1</label>
        <div class="col-md-6">
          <select class="form-control">
          </select>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label class="control-label col-md-6">Label 2</label>
        <div class="col-md-6">
          <select class="form-control">
          </select>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <label class="control-label col-md-6">Label 3</label>
        <div class="col-md-6">
          <div class="input-group ">


            <span class="input-group-btn">
    					    		<select class="form-control">
    			        		</select>
    				    		</span>
            <span class="input-group-btn">
    					    		<select class="form-control">
    			        		</select>
    				    		</span>
            <span class="input-group-btn">
    					    		<select class="form-control">
    			        		</select>
    				    		</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

Upvotes: 2

Fahmi B.
Fahmi B.

Reputation: 798

just add

the margin-left:0; & margin-right:0;

in the form-group

because by default is negative

<div class="form-group" style="margin-left:0 !important;  margin-right:0 !important;">
  <label class="control-label col-md-6">Label 3</label>
  <div class="input-group col-md-6">
    <span class="input-group-btn">
                                <select class="form-control">
                            </select>
                            </span>
    <span class="input-group-btn">
                                <select class="form-control">
                            </select>
                            </span>
    <span class="input-group-btn">
                                <select class="form-control">
                            </select>
                            </span>
  </div>
</div>

Upvotes: 0

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

change HTML

<form class="form-horizontal container-fluid" role="form">
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                  <label class="control-label col-md-6" >Label 1</label>
                  <div class="col-md-6">
                    <select class="form-control">
                    </select>  
                  </div>
                </div>
            </div>              
            <div class="col-md-6">  
                <div class="form-group">
                  <label class="control-label col-md-6" >Label 2</label>
                  <div class="col-md-6">
                    <select class="form-control" >
                    </select>  
                  </div>
                </div>                  
            </div>              
        </div>
    <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                  <label class="control-label col-md-6">Label 3</label>
                 <div class="input-group">
  <span class="input-group-addon">
    <input type="checkbox" aria-label="Checkbox for following text input">
  </span>
  <select class="form-control">
                        </select>
</div>
          <div class="input-group">
  <span class="input-group-addon">
    <input type="checkbox" aria-label="Checkbox for following text input">
  </span>
  <select class="form-control">
                        </select>
</div>
             <div class="input-group">
  <span class="input-group-addon">
    <input type="checkbox" aria-label="Checkbox for following text input">
  </span>
  <select class="form-control">
                        </select>
</div>
                </div>
            </div>                          
        </div>
    </form>

https://jsfiddle.net/qrtcq8bs/4/

Upvotes: 0

Related Questions