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

8
  • 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? Commented May 21, 2015 at 23:13
  • I rewrote the post, please let me know if it's still unclear.
    – vgoklani
    Commented May 22, 2015 at 17:59
  • can you please create a sample on jsfiddle.net ?
    – Dhiraj
    Commented May 28, 2015 at 21:39
  • done, please see the revised question
    – vgoklani
    Commented May 28, 2015 at 22:46
  • 1
    I am not sure either... this is the closest I was able to get it jsfiddle.net/3vtrgkc7/17 but it's not perfect
    – blurfus
    Commented May 28, 2015 at 23:54

11 Answers 11

33
+25

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;
    }
}
1
  • max-width: 100% !important might be a better fit.
    – derenio
    Commented Aug 19, 2015 at 9:45
14

You can solve this by setting data-* attribute:

<select id="select2" class="form-control" data-width="100%">
    ...
</select>
2
  • 2
    Is this a documented attribute? I tried it and it works perfect. Wondering why this is not up voted more.
    – Theunis
    Commented Aug 15, 2017 at 10:32
  • This is the perfect solution!
    – lewis4u
    Commented Oct 3, 2017 at 18:13
12

This works for me:

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

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

2
  • 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
    Commented Jun 5, 2015 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.
    Commented Jun 6, 2015 at 13:30
1

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

2
  • "col-" ? I don't follow what you're saying
    – vgoklani
    Commented Jun 1, 2015 at 10:35
  • 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 Commented Jun 1, 2015 at 10:45
1

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

 @media screen {
    .select2 {
        width: 100% !important;
    }
}
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", "");
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%');   
 }
}
0

Javascript :

$("#myid").select2({
   width:'100%'
});
0
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;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.