CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Remy Grandin
Remy Grandin

Reputation: 1686

Bootstrap dropdown full-width with input-group

I'm trying to use a dropdown zone to host a custom component. however, the dropdown is not from a standard dropdown but from an input group button.

I need this because I want a jstree down there as my selection need is too complex to fit in a simple select.

Here is what I would it to be like :

enter image description here

I would like for the dropdown zone to be the full width of the input. I've tried setting it at 100% but it seam to do nothing. A fixed with work but would break the responsivness of the site.

Here is my HTML :

<div class="col-md-3">
    <fieldset>
        <legend>Options</legend>
        <div class="form-group">
            <div class="input-group">
                <input type="text" class="form-control">
                <div class="input-group-btn">
                    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
                    <ul class="dropdown-menu dropdown-menu-right" role="menu" style="width: 300px;">
                        <li>
                            aaaa<br />
                            aaaa<br />
                            aaaa<br />
                            aaaa<br />
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </fieldset>
</div>

Full jsfiddle : https://jsfiddle.net/rry7hr5b/1/

Upvotes: 1

Views: 2702

Answers (3)

gustre
gustre

Reputation: 81

I found a workaround using the .input-group-addon instead of the .input-group-btn. It's neat, because you need no plugins or jQuery whatsoever. Mind however that the whole dropdown menu requires a minimum width.

<div class="input-group">
    <input type="text" class="form-control">
    <div class="input-group-addon" style="padding:0; border:none; background:none">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button" style="border-bottom-left-radius:0; border-top-left-radius:0">
            <span class="caret"></span>
        </button>
    </div>
    <ul class="dropdown-menu" role="menu" style="width:100%;">
        <li>aa</li>
        <li>aa</li>
        <li>aa</li>
    </ul>
</div>

Check out this fiddle: https://jsfiddle.net/rry7hr5b/5/

Upvotes: 2

Waqar
Waqar

Reputation: 848

Try this. With Jquery.

$(document).ready(function(e) {
    function customwidth()
        {
            var formwidth = $('.form-group').width();       
            $('.dropdown-menu').width(formwidth);   
        }

        customwidth();
        $(window).resize(function(e) {
            customwidth();
        });
    });

Upvotes: 2

Karthi Keyan
Karthi Keyan

Reputation: 804

Don't use this kind of ul li for select item to customize Select in bootstrap there is plug-in available please try this

http://silviomoreto.github.io/bootstrap-select/

and here some more link..

http://gregfranko.com/jquery.selectBoxIt.js/

Upvotes: 0

Related Questions