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

Stannite

Its not clear from your post what your actual question is. Your code you provided has hard coded sizes (thus not responsive). And you mentioned something about a parent container at the end? – Mash

I rewrote the post, please let me know if it's still unclear. – Stannite

can you please create a sample on jsfiddle.net ? – Glut

done, please see the revised question – Stannite

do you want to hide the select2 boxes at any time? i.e. at any window size/width? or do you want to always show them regardless of window size/width (but resized) ? – Withrow

We're hiding them in the bootstrap XS mode, but then I would like to show them in S, M, and L. My bigger issue is that i don't know how to make them responsive – Stannite

I am not sure either... this is the closest I was able to get it jsfiddle.net/3vtrgkc7/17 but it's not perfect – Withrow

Can someone help me with this issue - github.com/select2/select2/issues/6100 – Brancusi

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

Jackelynjackeroo

max-width: 100% !important might be a better fit. – Krispin

Answer 2

You can solve this by setting data-* attribute:

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

Vasques

Is this a documented attribute? I tried it and it works perfect. Wondering why this is not up voted more. – Tsan

This is the perfect solution! – Buddie

Answer 3

This works for me:

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

Hydroponics

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

Difficult

Answer 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.

Extraterritoriality

The document page states that select2 is indeed responsive: "Select2's width can be set to a percentage of its parent to support responsive design." I posted this question because I couldn't figure out how to implement this specific feature – Stannite

I guess what they mean is that it can adapt to various widths, not necessarily when the user resizes the window, which is what you asked, right? – Extraterritoriality

Answer 6

Have to tried to apply col- to input field? like this "multiple" id="Search1" style="height:34px"></select>

Carleycarli

"col-" ? I don't follow what you're saying – Stannite

You are using Bootstrap, right? then try to use bootstrap input classes or grid classes, for eg: <select multiple id="Search1" class="col-md-4 col-sm-4 col-lg-4 hidden-xs" multiple="multiple" id="Search1" style=";height:34px"></select>. hidden -xs will hide it from extra small display. try it. Also you can use input classes from bootstrap. check this http://getbootstrap.com/css/#forms and http://getbootstrap.com/components/#input-groups – Carleycarli

Answer 7

add below css and reference it to the last of your html

 @media screen {
    .select2 {
        width: 100% !important;
    }
}

Basket

Answer 8

As already stated by Alireza Fattahi, select2 v4 with the bootstrap theme is already responsive, sort of. To handle the browser resize issue you can reinitialize select2 on the resize event.

    $(window).resize(function () {
        $("select").select2();
    });

After checking this further I've come to the conclusion that you don't want to reinitialize the select2 controls. It's overkill and if you're not careful to reinitialize it in exactly the same way as it was created it will not work as expected.

What I found was since I am placing the controls in a responsive container all I needed to do was to get rid of the inline width in the select2 container after the control had been initialized. As far as I've tested it there is also no need to handle the window resize event.

    //Initialize select2
    $("select").select2({
       //your options
    });

    //Remove inline width after initialization
    $(".select2.select2-container").css("width", "");

Inept

Answer 9

Its just a sample and you can make it cleaner if you like and number is the name of class that I gave to select2

$screenWidth=$(this).width();

function checkWindowWidth() {
 if($screenWidth<767){
 }

 if(991>$screenWidth && $screenWidth>768){
    $('.number',.number+span).css('width','100%');
 }

 if($screenWidth<1199 && $screenWidth>992){
    $('.number,.number+span').css('width','45%');
 }

 if($screenWidth>1199){
    $('.number,.number+span').css('width','33%');   
 }
}

Beauchamp

Answer 10

Javascript :

$("#myid").select2({
   width:'100%'
});

Adenectomy

Answer 11

The min-width of the .select2-container class is 20em by default, by decreasing it as so it wont overflow.

Adjust as needed.

.select2-container {
  min-width: 17em;
}

Meritocracy