How do I change select2 box height
JqueryJquery Select2Jquery Problem Overview
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?
Jquery Solutions
Solution 1 - Jquery
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;
}
Solution 2 - Jquery
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.
Solution 3 - Jquery
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;}
Solution 4 - Jquery
This work for me
.select2-container--default .select2-results>.select2-results__options{
max-height: 500px !important;
}
Solution 5 - Jquery
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%);
}
Solution 6 - Jquery
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:
Solution 7 - Jquery
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;
}
Solution 8 - Jquery
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!
Solution 9 - Jquery
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');
});
Solution 10 - Jquery
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
}
Solution 11 - Jquery
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.
Solution 12 - Jquery
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;
}
Solution 13 - Jquery
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;
}
Solution 14 - Jquery
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;
}
Solution 15 - Jquery
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;
}
Solution 16 - Jquery
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.
Solution 17 - Jquery
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.
Solution 18 - Jquery
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;
}
Solution 19 - Jquery
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)
Solution 20 - Jquery
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.
Solution 21 - Jquery
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;
}
Solution 22 - Jquery
This is my solution. Note: for bootstrap 4
.select2-container {
height: calc(1.5em + .75rem + 2px) !important;
}
Solution 23 - Jquery
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.
Solution 24 - Jquery
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"});
Solution 25 - Jquery
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;
}
Solution 26 - Jquery
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
}
Solution 27 - Jquery
Apply this override CSS to increase the result box height
.select2-container--bootstrap4 .select2-results>.select2-results__options {
max-height: 20em;
}
Solution 28 - Jquery
add style
.select2-container .select2-selection--single{
height:0%;
}
Solution 29 - Jquery
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.
Solution 30 - Jquery
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;
}
Solution 31 - Jquery
Quick and easy, add this to your page:
<style>
.select2-results {
max-height: 500px;
}
</style>