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

Solution 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;
    }
}

Solution 2

You can solve this by setting data-* attribute:

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

Solution 3

This works for me:

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

Solution 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;
}

Solution 5

One thing that select2 does is to set a fixed width to the elements it generates so by default it is not responsive.

Using a bit of JavaScript you can set the width of each <select> element on the $(window).resize() event and then reinitialize the select2 plugin.

Note: In order for the elements to be responsive you cannot set a fixed width (e.g. 400px) but set a fluid width instead. In my example I assume that each select will have as width equal to one third of the body width.

// Assume that each select will have as width the 1/3 of the body width
// Get body width and divide it with 3 and apply it to each select
var width = $('body').width() / 3;
$('#Search1, #Search2').width(width);

$("#Search1, #Search2").select2({
    data: data
});

// Put same code to the window.resize handler to run again when the window is resized
$(window).resize(function() {
    var width = $('body').width() / 3;
    $('#Search1, #Search2').width(width);

    $("#Search1, #Search2").select2({
        data: data
    });
});

Here is a working demo.

View more solutions