user1050619 user1050619 - 5 months ago 23
CSS Question

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>

Answer

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/

Comments