如何更改select2框高度
我喜欢从https://github.com/ivaynberg/select2 select2框我使用格式：选项来格式化每个元素，它看起来不错。
一切都很好，除了由于图像select的元素大于select框的高度。
我知道如何改变宽度，但是如何改变高度，以便在元素被选中之后，它显示完整的东西（大约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框
<select id="selboxChild" style="width: 300px; height: 200px"> <option value="">No child attached</option> </select>
澄清：我不希望每个选项的高度改变我select一个孩子后，我正在寻找select框来改变高度。
所以，当页面第一次加载它说：“没有select的孩子”当你点击下拉，select一个孩子，你看到孩子的形象。 现在我需要select框来扩大！ 否则，孩子的照片被切断。
有谁明白？
你可以用一些简单的CSS来做到这一点。 从我读到的，你想要设置元素的高度与类“select2-choices”。
.select2-choices { min-height: 150px; max-height: 150px; overflow-y: auto; }
这应该给你一个150px的设置高度，它会滚动，如果需要的话。 只需调整高度，直到您的图像符合需要。
您也可以使用css来设置select2结果的高度（select控件的下拉部分）。
ul.select2-results { max-height: 200px; }
200px是默认的高度，所以将其更改为所需的下拉高度。
你可能想先给你的select2一个特殊的类，然后只修改该类的CSS，而不是改变所有的select2 CSS，全站。
$("#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;}
编辑select2.css文件。 转到高度选项并更改：
.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%); }
所选的答案是正确的，但你不应该编辑select2.css文件。 您可以将以下添加到您自己的自定义CSS文件。
.select2-container .select2-choice { display: block!important; height: 36px!important; white-space: nowrap!important; line-height: 26px!important; }
.select2-selection__rendered { line-height: 31px !important; } .select2-container .select2-selection--single { height: 35px !important; } .select2-selection__arrow { height: 34px !important; }
这里是我对Carpetsmoker的回答（我喜欢它是因为它是dynamic的），清理和更新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'); });
我来到这里寻找一种方法来指定启用select2的下拉菜单的高度。 那对我有用：
.select2-container .select2-choice, .select2-result-label { font-size: 1.5em; height: 41px; overflow: auto; } .select2-arrow, .select2-chosen { padding-top: 6px; }
之前：
后： 
似乎样式表select器随着时间而改变。 我正在使用select2-4.0.2，并且正确的select器设置框高度目前是：
.select2-container--default .select2-results > .select2-results__options { max-height: 200px }
这为我工作
.select2-container--default .select2-results>.select2-results__options{ max-height: 500px; }
我正在使用Select2 4.0。 这对我有用。 我只有一个Select2控件。
.select2-selection.select2-selection--multiple{ min-height: 25px; max-height: 25px; }
恕我直言，设置高度固定的数字是很less有用的事情。 将其设置为屏幕上可用的空间是非常有用的。
这正是这个代码所做的：
$('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) })
我做了这个select2 3.5。 我没有用4.0testing，但是从文档来看也可以用4.0。
在select2.css之后排队另一个css文件，并在该css中添加以下内容：
.select2-container .select2-selection { height: 34px; }
即如果你想select框高度的高度是34px。
我有一个类似的问题，这些解决scheme大部分是靠近，但没有雪茄。 这是最简单的forms：
.select2-selection { min-height: 10px !important; }
您可以将最小高度设置为您想要的值。 高度将根据需要扩大。 我个人发现填充有点不平衡，字体太大，所以我在这里也添加了。
我知道这个问题是超级老，但我在2017年寻找一个解决这个相同的问题，并find一个自己。
.select2-selection { height: auto !important; }
这将根据其内容dynamic调整input的高度。
快速简单，将此添加到您的页面：
<style> .select2-results { max-height: 500px; } </style>
您不需要更改所有select2的高度 – 将源<input>类复制到select2-container，因此您可以通过input类来设置它们的样式。 例如，如果要为select2的某些实例的高度设置样式，请将class your-class添加到source <select>元素，然后在CSS文件中使用“.select2-container。your your-class 。
问候。
有一些问题：类名称为select2*不会被复制。
