jQuery 如何更改 select2 框的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14824676/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I change select2 box height
提问by relipse
I love the select2 box from https://github.com/ivaynberg/select2I am using the format: option to format each element, and it looks great.
我喜欢https://github.com/ivaynberg/select2 中的 select2 框 我正在使用 format: 选项来格式化每个元素，它看起来很棒。
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)
我知道如何更改宽度，但是如何更改高度以便在选择元素后显示完整内容（约 150 像素）
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 changeI 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?
有人明白吗？
回答by Rodrigo
.select2-selection__rendered {
line-height: 31px !important;
}
.select2-container .select2-selection--single {
height: 35px !important;
}
.select2-selection__arrow {
height: 34px !important;
}
回答by Ryan Gill
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".
你可以用一些简单的css来做到这一点。根据我的阅读，您想使用“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.
这应该给你一个 150px 的设置高度，如果需要它会滚动。只需调整高度，直到您的图像符合要求。
You can also use css to set the height of the select2-results (the drop down portion of the select control).
您还可以使用 css 设置 select2-results（选择控件的下拉部分）的高度。
ul.select2-results {
max-height: 200px;
}
200px is the default height, so change it for the desired height of the drop down.
200px 是默认高度，因此将其更改为下拉菜单的所需高度。
回答by Abram
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.
您可能希望首先为您的 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;}
回答by Mohamad Hamouday
This work for me
这对我有用
.select2-container--default .select2-results>.select2-results__options{
max-height: 500px !important;
}
回答by Jason Speer
edit select2.css file. Go to the height option and change:
编辑 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%);
}
回答by Vadym Tyemirov
I came here looking for a way to specify the height of the select2-enabled dropdown. That what has worked for me:
我来到这里寻找一种方法来指定启用 select2 的下拉列表的高度。对我有用的东西：
.select2-container .select2-choice, .select2-result-label {
font-size: 1.5em;
height: 41px;
overflow: auto;
}
.select2-arrow, .select2-chosen {
padding-top: 6px;
}
BEFORE:
前：
AFTER:
后：
回答by Alao
The selected answer is correct but you shouldn't have to edit the select2.cssfile. You can add the following to your own custom css file.
所选答案是正确的，但您不必编辑select2.css文件。您可以将以下内容添加到您自己的自定义 css 文件中。
.select2-container .select2-choice {
display: block!important;
height: 36px!important;
white-space: nowrap!important;
line-height: 26px!important;
}
回答by Ian
Here's my take on Carpetsmoker's answer (which I liked due to it being dynamic), cleaned up and updated for select2 v4:
这是我对 Carpetsmoker 的回答（我喜欢它，因为它是动态的）的看法，针对 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');
});
回答by billynoah
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-4.0.2 并且当前设置框高度的正确选择器是：
.select2-container--default .select2-results > .select2-results__options {
max-height: 200px
}
回答by Developer
Lazy solution I found here https://github.com/panorama-ed/maximize-select2-height
我在这里找到的懒惰解决方案 https://github.com/panorama-ed/maximize-select2-height
maximize-select2-height
最大化-选择2-高度
This package is short and simple. It magically expands your Select2 dropdowns to fill the height of the window.
这个包简短而简单。它神奇地扩展了您的 Select2 下拉列表以填充窗口的高度。
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)!
它考虑了下拉列表中元素的数量、Select2 在页面上的位置、页面的大小和滚动位置、滚动条的可见性以及下拉列表是向上还是向下呈现。每次打开下拉菜单时它都会调整自己的大小。缩小后，大约 800 字节（包括注释）！
(Note that this plugin is built for Select2 v4.x.x only.)
（请注意，此插件仅针对 Select2 v4.xx 构建。）
$("#my-dropdown").select2().maximizeSelect2Height();
Enjoy!
享受！
