如何更改 select2框的高度

我喜欢《 https://github.com/ivaynberg/select2》中的 select2框 我使用 format: 选项来格式化每个元素，它看起来很棒。

除了选定的元素由于图像而大于选择框的高度之外，一切都很正常。

我知道如何改变宽度，但我如何改变高度，以便在元素被选中后，它显示完整的东西(大约150px)

这是我的入会仪式:

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

这是我的选择框

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

澄清: 我不希望每个选项的高度改变 我正在寻找选择框，以改变高度后，您选择了一个孩子。

所以当页面第一次加载时，显示“无子选中” 当您单击下拉菜单并选择一个子元素时，您将看到该子元素的图像。 现在我需要选择框扩展! 否则的孩子的图片被切断。

有人明白吗？

197949 次浏览
小开

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.

小开

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

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

小开

Quick and easy, add this to your page:

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

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

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.

小开

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.

小开

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
}
小开

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

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.

小开

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.

小开

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

This work for me

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

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.

小开

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!

小开

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

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

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.

小开

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

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
}
小开

Apply this override CSS to increase the result box height

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

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

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

add style

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

This is my solution. Note: for bootstrap 4

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

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

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

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>


提交答案