How to make select2 v4 search boxes responsive in the bootstrap 3 nav bar?

Question

I've placed select2 search boxes inside a bootstrap 3 navbar. The issue is when I resize the browser, the search boxes don't auto-resize, and the navbar ends up overflowing. It's not clear to be how to make the select2 boxes responsive.

Please see here: https://jsfiddle.net/vgoklani/3vtrgkc7/13/

You will have to resize the Result window in jsfiddle. The search boxes are hidden if the width isn't sufficiently long, and will not show up. What I would like is for the search boxes to be responsive, such that their width resizes based on the width of the window.

    <nav class="navbar navbar-dark navbar-fixed-top">
        <div class="container-fluid">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
                    <i class="fa fa-chevron-down fa-2x" style="font-size: 16px;color:#fff"></i>
                </button>
                <a class="navbar-brand">NAME</a>
            </div>

            <div class="collapse navbar-collapse" id="navbar">
                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <select multiple class="Search1" multiple="multiple" id="Search1" style="width:400px;height:34px"></select>
                    </div>
                </form>

                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <select multiple class="Search2" multiple="multiple" id="Search2" style="width:400px;height:34px"></select>
                    </div>
                </form>

            </div>
        </div>
    </nav>

Thanks

Answer 1

I am not sure to understand what you want to do.

Can you try this:

@media screen and (max-width: 767px) {
    .select2 {
        width: 100% !important;
    }
}

Answer 2

You can solve this by setting data-* attribute:

<select id="select2" class="form-control" data-width="100%">
    ...
</select>

Answer 3

This works for me:

$(window).resize(function() {
    $('.select2').css('width', "100%");
});

Answer 4

I am using select 2 version 4, with bootstrap 3, the select 2 is responsive with no code.

Please beware that if you open a page with select 2 and resize it the select 2 size will not change and you may think that it is not responsive. How ever if you refresh your page in new size, you see that select 2 will fit correctly in the page.

This is because select 2 renders its components and calculate sizes when document is finished and do not refresh them when you resize the page. This is quite acceptable as we do not expect the end user change its browser size (this is what we usually do during development for test! )

As my experience if you change the select 2 width manually , you may find situations that the select2 drop down will not fit exactly at the top or button of select container.

---

The only case which some css is needed is when your site is browsed by a mobile and user can rotate the screen by rotating his mobile.

In this below css may help, as it will resize the select 2 by considering bootstrap columns:

/*Make select2 responsive*/
[class*="col-"] .select2-container {
    width:100%!important;
}
[class*="col-"] .select2-container .select2-search input[type="text"] {
    padding:2px 4%!important;
    width:90%!important;
    margin:5px 2%;
}
[class*="col-"] .select2-container .select2-drop {
    width: 100%!important;
}