CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user1050619
user1050619

Reputation: 20896

alignment issue with input append bootstrap

I have a btn-group that gives me an editable combox box. The only problem is that it's not aligned properly.

Here is the current box-

enter image description here

<div class="input-append btn-group form-control">
  <input class="input-sm span2" id="errorcount" size="16" type="text" value="Error">
  <ul class="dropdown-menu" id="dropdown-menu">
    <li><a href="#"><i class="icon-pencil"></i>less than 1,000</a></li>
    <li><a href="#"><i class="icon-pencil"></i>1,000 - 5,000</a></li>
    <li><a href="#"><i class="icon-pencil">                        
  </ul>
  <a class="btn btn-primary dropdown-toggle pull-right" data-toggle="dropdown" href="#">
    <span class="caret"></span>
  </a>
</div>

New changes

enter image description here

<div class="input-group">
                          <input type="text" class="input-sm" id="errorcount" size="" value="Error">
                          <div class="input-group">
                            <button type="button" class="btn btn-primary dropdown-toggle pull-right" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                              <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" id="dropdown-menu">
                              <li><a href="#"><i class="icon-pencil"></i>less than 1,000</a></li>
                                <li><a href="#"><i class="icon-pencil"></i>1,000 - 5,000</a></li>

                            </ul>
                            </div>
                    </div>

Upvotes: 1

Views: 488

Answers (1)

Kodie Grantham
Kodie Grantham

Reputation: 2031

You're missing a few container classes such as form-control and input-group.

Here's a working example of your code:

<div class="input-group">
  <input type="text" class="form-control" id="errorcount" size="16" value="Error">
  <div class="input-group-btn">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-right" id="dropdown-menu">
      <li><a class="dropdown-item" href="#"><i class="icon-pencil"></i>less than 1,000</a></li>
      <li><a class="dropdown-item" href="#"><i class="icon-pencil"></i>1,000 - 5,000</a></li>
    </ul>
  </div>
</div>

jsFiddle here: https://jsfiddle.net/5g6c281b/

Upvotes: 2

Related Questions