99

I love the select2 box from https://github.com/ivaynberg/select2 I am using the format: option to format each element, and it looks great.

Everything is fine except the selected element is bigger than the height of the select box due to an image.

I know how to change the width, but how do I change the height so that AFTER the element is selected, it shows the full thing (about 150px)

Here is my initiation:

<script>
    $("#selboxChild").select2({
        matcher: function(term, text) { 
            var t = (js_child_sponsors[text] ? js_child_sponsors[text] : text); 
            return t.toUpperCase().indexOf(term.toUpperCase()) >= 0; 
        },
        formatResult: formatChild,
        formatSelection: formatChild,
        escapeMarkup: function(m) {
            return m;
        }
    });
</script>

and here is my select box

<select id="selboxChild" style="width: 300px; height: 200px">
    <option value="">No child attached</option>
</select>

To Clarify: I do NOT want the Height of each option to change I am looking for the select box to change height after you select a child.

So when the page first loads it says "No child selected" When you click the drop down and select a child you see the child's image. NOW i need the select box to expand! Otherwise the picture of the child is cut off.

Does anyone understand?

2
  • 5
    I know this doesn't address OP's specific issue, but Google seems to be ranking this article first when I search for "select2 height", so this might help some other people. If you're using Bootstrap and just want your select2 inputs to be the same height as the rest of your inputs, there is now a theme available: github.com/select2/select2-bootstrap-theme
    – alexw
    Feb 12, 2016 at 16:27
  • .select2-container .select2-selection { height: 60px; overflow: auto; } This one work for me
    – Abu Sayem
    Aug 11, 2022 at 3:13

37 Answers 37

137

You should add the following style definitions to your CSS:

.select2-selection__rendered {
    line-height: 31px !important;
}
.select2-container .select2-selection--single {
    height: 35px !important;
}
.select2-selection__arrow {
    height: 34px !important;
}
2
  • 2
    This code will serve to make the selection itself larger, but not the box that appears with options after a selection is made, which is what the question addresses. This answer is incorrect, which is why the author of the question added clarification.
    – ftrotter
    Sep 1, 2019 at 6:03
  • How to set different height, for example 45px? Sep 22 at 11:52
33

You could do this with some simple css. From what I read, you want to set the Height of the element with the class "select2-choices".

.select2-choices {
  min-height: 150px;
  max-height: 150px;
  overflow-y: auto;
}

That should give you a set height of 150px and it will scroll if needed. Simply adjust the height till your image fits as desired.

You can also use css to set the height of the select2-results (the drop down portion of the select control).

ul.select2-results {
  max-height: 200px;
}

200px is the default height, so change it for the desired height of the drop down.

4
  • I actually don't want the height of the choices different, i want the height of the actual select box to change after I select a child.
    – relipse
    Oct 9, 2013 at 6:22
  • 2
    Setting .select2-choices seems to have no effect. Setting ul.select2-results does work. May 22, 2015 at 12:27
  • 3
    With version 4 it looks like it's supposed to be .select2-results,.select2-results__options now, with the !important flag Aug 22, 2018 at 18:56
  • 1
    With v4, you need the __options,but don't need !important if you add your container, eg: .my-select2-wrapper .select2-results > .select2-results__options
    – freedomn-m
    Jan 17, 2020 at 11:05
20

You probably want to give a special class to your select2 first, then modify the css for that class only, rather than changing all select2 css, sitewide.

$("#selboxChild").select2({ width: '300px', dropdownCssClass: "bigdrop" });

SCSS

.bigdrop.select2-container .select2-results {max-height: 200px;}
.bigdrop .select2-results {max-height: 200px;}
.bigdrop .select2-choices {min-height: 150px; max-height: 150px; overflow-y: auto;}
3
  • I did exactly what you said, but AFTER the child is selected, the height of the select box is still the same. I want it to expand if a child is selected.
    – relipse
    Oct 9, 2013 at 6:21
  • I want to make the select2 box slim. for that i tried several ways including yours above, but could not get the desired result.` //$("#themes").select2({dropdownAutoWidth:true,dropdownCssClass:"slim-select"}); //$("#themes").select2({dropdownAutoWidth:true,containerCss:{'height':'16px','line-height':'16px'}}); $("#themes").select2({dropdownAutoWidth:true,containerCssClass:'slim-select'});` ---- none of these work.
    – rajeev
    Dec 18, 2014 at 6:47
  • This worked for me and since I use bootstrap it made it match the other inputs exactly! Sep 18, 2017 at 16:14
13

This work for me

.select2-container--default .select2-results>.select2-results__options{
    max-height: 500px !important;
}
0
7

edit select2.css file. Go to the height option and change:

.select2-container .select2-choice {
    display: block;
    height: 36px;
    padding: 0 0 0 8px;
    overflow: hidden;
    position: relative;

    border: 1px solid #aaa;
    white-space: nowrap;
    line-height: 26px;
    color: #444;
    text-decoration: none;

    border-radius: 4px;

    background-clip: padding-box;

    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;

    background-color: #fff;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff));
    background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 50%);
    background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 50%);
    background-image: -o-linear-gradient(bottom, #eee 0%, #fff 50%);
    background-image: -ms-linear-gradient(top, #fff 0%, #eee 50%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0);
    background-image: linear-gradient(top, #fff 0%, #eee 50%);
}
3
  • 3
    This is the most correct answer, as it will change the height of the container, not the options. Adding the following is enough: .select2-container .select2-choice { height: 200px; } To have it apply only after an object is selected, add/modify the corresponding css on a change event or similar.
    – Motin
    Nov 6, 2013 at 7:17
  • This changes the height of the select2 input field, which is not what was asked for. May 22, 2015 at 12:00
  • 44
    Please do not go in and modify source code files for other libraries. It breaks every time you want to get a new version. Just put your own style changes for your site after 3rd party libraries and allow CSS to override previous styles
    – KyleMit
    Jul 1, 2015 at 19:57
7

I came here looking for a way to specify the height of the select2-enabled dropdown. That what has worked for me:

.select2-container .select2-choice, .select2-result-label {
  font-size: 1.5em;
  height: 41px; 
  overflow: auto;
}

.select2-arrow, .select2-chosen {
  padding-top: 6px;
}

BEFORE:

enter image description here enter image description here

AFTER: select-2 enabled dropdown with css-defined height enter image description here

1
  • This is not what this question is about May 22, 2015 at 12:26
7

The selected answer is correct but you shouldn't have to edit the select2.css file. You can add the following to your own custom css file.

.select2-container .select2-choice {
    display: block!important;
    height: 36px!important;
    white-space: nowrap!important;
    line-height: 26px!important;
}
1
  • 1
    I'm using select2 v 3.5.2 and this code worked for me. Couldn't find out how to alter height, in their documents. Also very valid point on adding to your custom css not the select2.css
    – dading84
    Nov 23, 2016 at 22:40
6

Lazy solution I found here https://github.com/panorama-ed/maximize-select2-height

maximize-select2-height

This package is short and simple. It magically expands your Select2 dropdowns to fill the height of the window.

It factors in the number of elements in the dropdown, the position of the Select2 on the page, the size and scroll position of the page, the visibility of scroll bars, and whether the dropdown is rendered upwards or downwards. And it resizes itself each time the dropdown is opened. And minified, it's ~800 bytes (including comments)!

(Note that this plugin is built for Select2 v4.x.x only.)

$("#my-dropdown").select2().maximizeSelect2Height();

Enjoy!

2
  • 1
    It is great for one select2. If you have several it will apply the latest height calculated for the latest select2 it was applied to
    – Tainmar
    Apr 7, 2020 at 8:58
  • @Tainmar Right. Perhaps you have modify this plugin a little bit.
    – NoWar
    Apr 14, 2020 at 2:51
5

Here's my take on Carpetsmoker's answer (which I liked due to it being dynamic), cleaned up and updated for select2 v4:

$('#selectField').on('select2:open', function (e) {
  var container = $(this).select('select2-container');
  var position = container.offset().top;
  var availableHeight = $(window).height() - position - container.outerHeight();
  var bottomPadding = 50; // Set as needed
  $('ul.select2-results__options').css('max-height', (availableHeight - bottomPadding) + 'px');
});
2
  • This is the one. I changed var bottomPadding = 70; May 7, 2016 at 3:24
  • Help me with Select2 v4.0.3! "Old" Option dropdownCssClass: 'bigdrop' seems not to work with Select2 v4.x anymore.
    – user4420255
    Feb 3, 2017 at 6:53
5

Seems the stylesheet selectors have changed over time. I'm using select2-4.0.2 and the correct selector to set the box height is currently:

.select2-container--default .select2-results > .select2-results__options {
    max-height: 200px
}
1
  • .select2-results__options is the part other answers are missing. I'm using Select2 4.0.3.
    – Max Malysh
    Jan 10, 2017 at 0:26
3

I know this question is super old, but I was looking for a solution to this same question in 2017 and found one myself.

.select2-selection {
    height: auto !important;
}

This will dynamically adjust the height of your input based on its content.

0
3

I came up with:

.select2,
.select2-search__field,
.select2-results__option
{
    font-size:1.3em!important;
}
.select2-selection__rendered {
    line-height: 2em !important;
}
.select2-container .select2-selection--single {
    height: 2em !important;
}
.select2-selection__arrow {
    height: 2em !important;
}
0
3

Just add in select2.css

/* Make Select2 boxes match Bootstrap3 as well as Bootstrap4 heights: */
.select2-selection__rendered {
line-height: 32px !important;
}

.select2-selection {
height: 34px !important;
}
2

I am using Select2 4.0. This works for me. I only have one Select2 control.

.select2-selection.select2-selection--multiple {
    min-height: 25px;
    max-height: 25px;
}
2

None of the above solutions worked for me. This is my solution:

/* Height fix for select2 */
.select2-container .select2-selection--single, .select2-container--default .select2-selection--single .select2-selection__rendered, .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 35px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 35px;
}
1

Enqueue another css file after the select2.css, and in that css add the following:

.select2-container .select2-selection {
  height: 34px; 
}

i.e. if you want the height of the select box height to be 34px.

1

I had a similar problem, and most of these solutions are close but no cigar. Here is what works in its simplest form:

.select2-selection {
    min-height: 10px !important;
}

You can set the min-height to what ever you want. The height will expand as needed. I personally found the padding a bit unbalanced, and the font too big, so I added those here also.

1

On 4.0.6, below is the solution that worked for me. Had to include select2-selection__rendered and select2-selection__arrow to vertically align the dropdown label and the arrow icon:

.select2-container .select2-selection, 
.select2-selection__rendered, 
.select2-selection__arrow {
    height: 48px !important;
    line-height: 48px !important;
}
1

I use the following to dynamically adjust height of the select2 dropdown element so it nicely fits the amount of options:

$('select').on('select2:open', function (e) {
  var OptionsSize = $(this).find("option").size(); // The amount of options 
  var HeightPerOption = 36; // the height in pixels every option should be
  var DropDownHeight = OptionsSize * HeightPerOption;
  $(".select2-results__options").height(DropDownHeight);
});

Make sure to unset the (default) max-height in css:

.select2-container--default .select2-results>.select2-results__options {
  max-height: inherit;
}

(only tested in version 4 of select2)

1

If anyone here trying to match input styles and the form group height of bootstrap4 with select2 here's what i did ,

.select2-container{
    .select2-selection{
        height: 37px!important;
    }
    .select2-selection__rendered{
        margin-top: 4px!important;
    }
    .select2-selection__arrow{
        margin-top: 4px;
    }
    .select2-selection--single{
        border: 1px solid #ced4da!important;
    }
    *:focus{
        outline: none;
    } 
}

This will also remove the outlines.

1

if you have several select2 and just want to resize one. do this:

get id to your element:

  <div id="skills">
      <select class="select2" > </select>
  </div>

and add this css:

  #skills > span >span >span>.select2-selection__rendered{
       line-height: 80px !important;
  }
1

This is my solution. Note: for bootstrap 4

.select2-container {
    height: calc(1.5em + .75rem + 2px) !important;
}
0

IMHO, setting the height to a fixed number is rarely a useful thing to do. Setting it to whatever space is available on the screen is much more useful.

Which is exactly what this code does:

$('select').on('select2-opening', function() {
    var container = $(this).select2('container')
    var position = $(this).select2('container').offset().top
    var avail_height = $(window).height() - container.offset().top - container.outerHeight()

    // The 50 is a magic number here. I think this is the search box + other UI
    // chrome from select2?
    $('ul.select2-results').css('max-height', (avail_height - 50) + px)
})

I made this for select2 3.5. I didn't test it with 4.0, but from the documentation is will probably work for 4.0 as well.

0
0

Try this, it's work for me:

<select name="select_name" id="select_id" class="select2_extend_height wrap form-control" data-placeholder="----">
<option value=""></option>
<option value="1">test</option>
</select>

.wrap.select2-selection--single {
    height: 100%;
}
.select2-container .wrap.select2-selection--single .select2-selection__rendered {
    word-wrap: break-word;
    text-overflow: inherit;
    white-space: normal;
}

$('.select2_extend_height').select2({containerCssClass: "wrap"});
0

For v4.0.7 You can increase the height by overriding CSS classes like this example:

    .select2-container .select2-selection--single {
    height: 36px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
}
0

Very easy way to customize Select 2 rendered component with few lines of CSS Styling :

// Change the select container width and allow it to take the full parent width
.select2 
{
    width: 100% !important
}

// Set the select field height, background color etc ...
.select2-selection
{    
    height: 50px !important
    background-color: $light-color
}

// Set selected value position, color , font size, etc ...
.select2-selection__rendered
{ 
    line-height: 35px !important
    color: yellow !important
}
0

Apply this override CSS to increase the result box height

.select2-container--bootstrap4 .select2-results>.select2-results__options {
    max-height: 20em;
}
0

add style

.select2-container .select2-selection--single{
     height:0%;
 }
0

If all the above answer does not work for you (Which didn't work for me) This worked for me

.select2-results__options {
        max-height: 300px; //This can be any height you want
        overflow:scroll;
    }
0

Try This CSS:

.select2-selection__rendered {
    padding: 0px 5px !important;
}
.select2-container .select2-selection--single {
    height: 30px !important;
}
.select2-selection__arrow {
    height: 30px !important;
    top: 0px !important;
}

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