jquery - 如何更改 select2 框的高度

Question

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

一切都很好，除了所选元素由于图像而大于选择框的高度。

我知道如何改变宽度，但是如何改变高度，以便在选择元素后，它显示完整的东西（大约 150 像素）

这是我的启蒙：

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

澄清：我不希望更改每个选项的高度 我正在寻找选择框以在选择孩子后更改高度。

因此，当页面首次加载时，它会显示“未选择孩子”当您单击下拉菜单并选择一个孩子时，您会看到孩子的图像。现在我需要选择框来展开！否则孩子的照片就被剪掉了。

有人明白吗？

score 105 · Accepted Answer

您应该在 CSS 中添加以下样式定义：

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

score 33 · Accepted Answer

你可以用一些简单的CSS来做到这一点。根据我的阅读，您想使用“select2-choices”类设置元素的高度。

.select2-choices {
  min-height: 150px;
  max-height: 150px;
  overflow-y: auto;
}

这应该给你一个 150px 的设置高度，如果需要它会滚动。只需调整高度，直到您的图像符合需要。

您还可以使用 css 设置 select2-results 的高度（选择控件的下拉部分）。

ul.select2-results {
  max-height: 200px;
}

200px 是默认高度，因此将其更改为所需的下拉高度。

score 18 · Accepted Answer

您可能想先为您的 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;}

score 11 · Accepted Answer

这对我有用

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

score 8 · Accepted Answer

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

score 7 · Accepted Answer

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

score 7 · Accepted Answer

我来这里是为了寻找一种方法来指定启用 select2 的下拉菜单的高度。这对我有用：

.select2-container .select2-choice, .select2-result-label {
  font-size: 1.5em;
  height: 41px; 
  overflow: auto;
}

.select2-arrow, .select2-chosen {
  padding-top: 6px;
}

前：

在此处输入图像描述

后： select-2 启用了具有 CSS 定义高度的下拉菜单在此处输入图像描述

score 5 · Accepted Answer

这是我对 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');
});

score 5 · Accepted Answer

我在这里找到的懒惰解决方案 https://github.com/panorama-ed/maximize-select2-height

最大化选择2高度

这个包短小精悍。它神奇地扩展了您的 Select2 下拉菜单以填充窗口的高度。

它考虑了下拉菜单中元素的数量、Select2 在页面上的位置、页面的大小和滚动位置、滚动条的可见性以及下拉菜单是向上还是向下呈现。每次打开下拉菜单时，它都会自行调整大小。缩小后，大约为 800 字节（包括注释）！

（请注意，此插件仅适用于 Select2 v4.xx。）

$("#my-dropdown").select2().maximizeSelect2Height();

享受！

score 5 · Accepted Answer

似乎样式表选择器随着时间的推移发生了变化。我正在使用 select2-4.0.2 并且当前设置框高度的正确选择器是：

.select2-container--default .select2-results > .select2-results__options {
    max-height: 200px
}

score 3 · Accepted Answer

我知道这个问题已经很老了，但我在 2017 年一直在寻找同样问题的解决方案，并自己找到了一个。

.select2-selection {
    height: auto !important;
}

这将根据其内容动态调整输入的高度。

score 3 · Accepted Answer

我想出了：

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

score 3 · Accepted Answer

只需添加 select2.css

/* Make Select2 boxes match Bootstrap3 as well as Bootstrap4 heights: */
.select2-selection__rendered {
line-height: 32px !important;
}

.select2-selection {
height: 34px !important;
}

score 2 · Accepted Answer

以上解决方案都不适合我。这是我的解决方案：

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

score 2 · Accepted Answer

我正在使用 Select2 4.0。这对我有用。我只有一个 Select2 控件。

.select2-selection.select2-selection--multiple {
    min-height: 25px;
    max-height: 25px;
}

score 1 · Accepted Answer

我使用以下内容动态调整 select2 下拉元素的高度，使其非常适合选项的数量：

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

确保在 css 中取消设置（默认）最大高度：

.select2-container--default .select2-results>.select2-results__options {
  max-height: inherit;
}

（仅在 select2 的第 4 版中测试过）

score 1 · Accepted Answer

在 4.0.6 上，以下是对我有用的解决方案。必须包含select2-selection__rendered并select2-selection__arrow垂直对齐下拉标签和箭头图标：

.select2-container .select2-selection, 
.select2-selection__rendered, 
.select2-selection__arrow {
    height: 48px !important;
    line-height: 48px !important;
}

score 1 · Accepted Answer

如果这里有人尝试将 bootstrap4 的输入样式和表单组高度与 select2 匹配，这就是我所做的，

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

这也将删除轮廓。

score 1 · Accepted Answer

在 select2.css 之后加入另一个 css 文件，并在该 css 中添加以下内容：

.select2-container .select2-selection {
  height: 34px; 
}

即，如果您希望选择框高度的高度为 34px。

score 1 · Accepted Answer

如果你有几个select2，只是想调整一个。做这个：

获取元素的 id：

  <div id="skills">
      <select class="select2" > </select>
  </div>

并添加这个 CSS：

  #skills > span >span >span>.select2-selection__rendered{
       line-height: 80px !important;
  }

score 1 · Accepted Answer

我遇到了类似的问题，这些解决方案中的大多数都很接近，但没有雪茄。以下是最简单的形式：

.select2-selection {
    min-height: 10px !important;
}

您可以将最小高度设置为您想要的任何值。高度将根据需要扩展。我个人觉得填充有点不平衡，而且字体太大，所以我也在这里添加了这些。

score 1 · Accepted Answer

这是我的解决方案。 注意：对于引导程序 4

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

score 0 · Accepted Answer

恕我直言，将高度设置为固定数字很少有用。将其设置为屏幕上可用的任何空间都更有用。

这正是这段代码的作用：

$('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.0 对其进行测试，但从文档来看可能也适用于 4.0。

score 0 · Accepted Answer

对于 v4.0.7，您可以通过覆盖 CSS 类来增加高度，如下例所示：

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

score 0 · Accepted Answer

试试这个，它对我有用：

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

score 0 · Accepted Answer

使用几行 CSS 样式自定义 Select 2 渲染组件的非常简单的方法：

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

score 0 · Accepted Answer

应用此覆盖 CSS 以增加结果框高度

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

score 0 · Accepted Answer

0

添加样式

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

于 2021-05-10T08:59:54.437 回答

score -1 · Accepted Answer

如果以上所有答案都对您不起作用（这对我不起作用）这对我有用

.select2-results__options {
        max-height: 300px; //This can be any height you want
        overflow:scroll;
    }

score -1 · Accepted Answer

您不需要更改所有 select2 的高度 - 源<input>类被复制到 select2-container，因此您可以通过输入类来设置它们的样式。例如，如果您想设置 select2 某些实例的高度样式，请将 class your-class 添加到源<select>元素，然后your-class在 CSS 文件中使用“.select2-container.”。

问候。

存在一些问题：select2*未复制类名称。

score -2 · Accepted Answer

快速简便，将其添加到您的页面：

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

jquery - 如何更改 select2 框的高度

31 回答 31

Related

Reference