How do I change select2 box height

Question

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?

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

This work for me

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

Answer 5

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

Answer 6

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:

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

Answer 8

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!

Answer 9

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

Answer 10

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
}

Answer 11

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.

Answer 12

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

Answer 13

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

Answer 14

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

Answer 15

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

Answer 16

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.

Answer 17

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.

Answer 18

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

Answer 19

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)

Answer 20

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.

Answer 21

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

Answer 22

This is my solution. Note: for bootstrap 4

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

Answer 23

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.

Answer 24

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

Answer 25

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

Answer 26

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
}

Answer 27

Apply this override CSS to increase the result box height

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

Answer 28

add style

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

Answer 29

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

Answer 30

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

Answer 31

I posted this answer a while back for a very similar issue which comes up when rendering html inside select2. Here's a some CSS which will allow the container to dynamically resize itself regardless of the selected content. All you need is the CSS itself but I've created a full snippet to demonstrate how it works.

var data = [{
  id: 0,
  text: '<div style="font-size: 1.2em; color:green">enhancement</div><div><b>Select2</b> supports custom themes using the theme option so you can style Select2 to match the rest of your application.</div>',
  title: 'enchancement'
}, {
  id: 1,
  text: '<div style="color:red">bug</div><div><small>This is some small text on a new line</small></div>',
  title: 'bug'
}];

$("select").select2({
  data: data,
  escapeMarkup: function(markup) {
    return markup;
  }
})

.select2-container .select2-selection--single {
  height: auto!important;
  padding: 5px 0;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: normal!important;
}
.select2-container .select2-selection--single .select2-selection__rendered {
  white-space: normal!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

<select style="width: 100%"></select>

Answer 32

Just add this to your CSS file where you are using select tag.

.select2-selection__rendered {
    line-height: 31px !important;
}
.select2-container .select2-selection--single {
    height: 35px !important;
}
.select2-selection__arrow {
    height: 34px !important;
}

Answer 33

after trying for literally hours I managed to do it like this:

ul#select2-customid-results {
    height: 360px !important;
    max-height: 360px !important;
}

where customid is the Id of the select ..

Answer 34

The following worked for me for multi select dropdown:

.select2-container .select2-selection--multiple{
   min-height: 40px !important;
 }

Answer 35

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.

Answer 36

.select2 { width: 277px !important; }

Answer 37

Quick and easy, add this to your page:

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