19

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

vgoklani
  • 10,685
  • 16
  • 63
  • 101
  • 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? – Kevin Brown-Silva May 21 '15 at 23:13
  • I rewrote the post, please let me know if it's still unclear. – vgoklani May 22 '15 at 17:59
  • can you please create a sample on http://jsfiddle.net ? – Dhiraj May 28 '15 at 21:39
  • done, please see the revised question – vgoklani May 28 '15 at 22:46
  • 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) ? – blurfus May 28 '15 at 22:59
  • 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 – vgoklani May 28 '15 at 23:16
  • 1
    I am not sure either... this is the closest I was able to get it http://jsfiddle.net/3vtrgkc7/17/ but it's not perfect – blurfus May 28 '15 at 23:54
  • Can someone help me with this issue - https://github.com/select2/select2/issues/6100 – Abhishek Tomar Sep 25 '21 at 20:35

11 Answers11

33

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;
    }
}
Seb33300
  • 7,464
  • 2
  • 40
  • 57
14

You can solve this by setting data-* attribute:

<select id="select2" class="form-control" data-width="100%">
    ...
</select>
lexxl
  • 317
  • 4
  • 13
11

This works for me:

$(window).resize(function() {
    $('.select2').css('width', "100%");
});
Filipe Daniel
  • 111
  • 1
  • 3
6

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;
}
Alireza Fattahi
  • 42,517
  • 14
  • 123
  • 173
2

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.

Tasos K.
  • 7,979
  • 7
  • 39
  • 63
  • 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 – vgoklani Jun 05 '15 at 20:14
  • 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? – Tasos K. Jun 06 '15 at 13:30
1

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

  • "col-" ? I don't follow what you're saying – vgoklani Jun 01 '15 at 10:35
  • You are using Bootstrap, right? then try to use bootstrap input classes or grid classes, for eg: ``. `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` – Akhil Namboothiri Jun 01 '15 at 10:45
1

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

 @media screen {
    .select2 {
        width: 100% !important;
    }
}
tjd
  • 4,064
  • 1
  • 24
  • 34
1

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", "");
rjax
  • 39
  • 5
0

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%');   
 }
}
Alisanie
  • 81
  • 5
0

Javascript :

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

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;
}
busla
  • 1
  • 2