Question

我喜欢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>

澄清：我不希望每个选项的高度都改变 我在选择一个孩子后，正在寻找选择框来改变身高。

所以当页面首次加载时会显示“没有选择孩子” 当您单击下拉菜单并选择一个孩子时，您会看到孩子的图像。现在我需要选择框来扩展！否则孩子的照片会被切断。

有人理解吗？

Answer 1

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

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

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

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

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

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

Answer 2

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

Answer 3

你可能想先给你的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;}

Answer 4

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

Answer 5

这项工作对我来说

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

Answer 6

所选答案是正确的，但您不必编辑 select2.css 文件。您可以将以下内容添加到您自己的自定义css文件中。

.select2-container .select2-choice {
    display: block!important;
    height: 36px!important;
    white-space: nowrap!important;
    line-height: 26px!important;
}

Answer 7

我来到这里寻找一种方法来指定启用select2的下拉列表的高度。这对我有用：

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

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

在：

enter image description here

在： select-2 enabled dropdown with css-defined height enter image description here

Answer 8

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

Answer 9

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

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

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

Answer 10

只需添加select2.css

revert

Answer 11

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

Page diagram (where i is an iFrame)
_____________
|     |     |
| i1  |  i2 |
|     |     |
|_____|_____|

Answer 12

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

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

Answer 13

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

netcoreapp1.1

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

Answer 14

我想到了：

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

Answer 15

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

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

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

（仅在select2的版本4中进行了测试）

Answer 16

以上解决方案均不适用于我。这是我的解决方案：

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

Answer 17

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

最大化-选择2高度

此软件包简短易懂。它神奇地扩展了Select2下拉列表以填充窗口的高度。

它取决于下拉菜单中元素的数量，页面上Select2的位置，页面的大小和滚动位置，滚动条的可见性以及下拉菜单是向上显示还是向下显示。每次打开下拉菜单时，它都会自动调整大小。而且缩小了，大约有800个字节（包括注释）！

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

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

享受！

Answer 18

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

Answer 19

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

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

您可以将最小高度设置为您想要的高度。高度将根据需要扩大。我个人发现填充有点不平衡，字体太大，所以我也在这里添加了。

Answer 20

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

这正是这段代码的作用：

$('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。

Answer 21

尝试一下，对我有用：

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

Answer 22

如果这里有人试图将输入样式和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;
    } 
}

这也会删除轮廓。

Answer 23

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

Answer 24

使用几行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
}

Answer 25

应用此替代CSS可以增加结果框的高度

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

Answer 26

如果您有多个select2，而只想调整一个。做到这一点：

为您的元素获取ID：

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

并添加此CSS：

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

Answer 27

添加样式

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

Answer 28

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

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

Answer 29

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

问候。

存在一些问题：不会复制类名select2*。

Answer 30

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

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

如何更改select2框高度

30 个答案: