CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Tobbe
Tobbe

Reputation: 3864

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

I have this:

dropdown screenshot

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?

Upvotes: 2

Views: 4248

Answers (2)

maioman
maioman

Reputation: 18764

Try setting:

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

.dropdown-menu {
    width: 100%;
}

check the updated fiddle

Upvotes: 6

Yooz
Yooz

Reputation: 2518

Change a bit the structure of your HTML :

<div class="col-xs-8 col-xs-offset-2">
    <form role="form">
        <div class="input-group">
            <div class="input-group-btn">
                            <input type="text" class="form-control">
                <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>
                                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
            </div>
        </div>
    </form>
</div>

and CSS :

 .input-group-btn ul {
width:100%;
  }

The only thing is you loose the rounded corners on the button.

http://jsfiddle.net/ytqyowgt/4/

Upvotes: 0

Related Questions