[jquery] How do I change select2 box height

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?

This work for me

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

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

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

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
}

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

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.

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

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

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

Quick and easy, add this to your page:

<style>
    .select2-results {
        max-height: 500px;
    }
</style>

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.

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

Apply this override CSS to increase the result box height

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

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

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!

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

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)

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.

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

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

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

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:

AFTER:

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
}

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.

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.

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.

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

You don't need to change the height for all select2 - source <input> classes are being copied to select2-container, so you can style them by classes of inputs. For example if you want to style the height of some instances of select2, add class your-class to source <select> element and then use ".select2-container.your-class in your CSS file.

Regards.

There is some issue: classes name as select2* are not copied.