How do I make a bootstrap dropdown as wide as its input-group?

css, html, twitter-bootstrap

Solution

Try setting:

.input-group-btn {
    position: static;
}

.dropdown-menu {
    width: 100%;
}

check the updated fiddle

Problem

I have this: Here's the code ``` <div class="col-xs-8 col-xs-offset-2"> <form role="form"> <div class="input-group"> <input type="text" class="form-control"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-right" role="menu"> <li class="input"><a href="#">black</a></li> <li class="input"><a href="#">white</a></li> <li class="input"><a href="#">red</a></li> <li class="input"><a href="#">blue</a></li> <li class="input"><a href="#">yellow</a></li> </ul> </div> </div> </form> </div> ``` Fiddle: http://jsfiddle.net/ytqyowgt/ How do I make the dropdown list as wide as the input field + button?

Original source