如何更改select2框的高度

74

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

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

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

有人知道吗？

jquery  jquery-select2 
— 润色
source
3
我知道这不能解决OP的特定问题，但是当我搜索“ select2 height”时，Google似乎将这篇文章排在第一位，因此这可能会对其他人有所帮助。如果您使用的是Bootstrap，并且只希望select2输入与其余输入的高度相同，那么现在可以使用一个主题：github.com/select2/select2-bootstrap-theme
— alexw

Answers:

76

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

.select2-selection__rendered {
    line-height: 31px !important;
}
.select2-container .select2-selection--single {
    height: 35px !important;
}
.select2-selection__arrow {
    height: 34px !important;
}
— 罗德里戈
source
这段代码将使选择本身变大，但不会使选择后出现的带有选项的框出现，这就是问题所在。这个答案是不正确的，这就是为什么问题的作者添加了澄清的原因。
— frottter's
32

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

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

这应该为您提供150px的设置高度，如果需要，它将滚动。只需调节高度，直到您的图像适合所需。

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

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

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

— 瑞安·吉尔（Ryan Gill）
source
我实际上不希望选择的高度不同，我希望在选择一个孩子之后更改实际选择框的高度。
— 2013年
2
设置.select2-choices似乎没有效果。设置ul.select2-results确实有效。
— 马丁·图尔诺伊
3
版本4看起来应该是.select2-results,.select2-results__options现在的，带有!important标志
— Brian Leishman
对于v4，您需要__options，但!important如果添加容器则不需要__options，例如：.my-select2-wrapper .select2-results > .select2-results__options
— Liberty-m
17

您可能想先为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;}
— 亚伯兰
source
我完全按照您说的做，但是在选择了孩子之后，选择框的高度仍然相同。如果要选择一个孩子，我希望它扩大。
— 2013年
我想使select2框变薄。为此，我尝试了包括您在内的几种方法，但无法获得所需的结果。//$("#themes").select2({dropdownAutoWidth:true,containerCss:{'height':'16px','line-height':'16px'}}）;; $（“＃themes”）。select2（{dropdownAutoWidth：true，containerCssClass：'slim-select'}）;`----这些都不起作用。
— rajeev 2014年
这对我有用，并且由于我使用了引导程序，因此使其完全匹配其他输入！
— Cesar Bielich
8

编辑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%);
}
— 杰森·斯佩尔
source
3
这是最正确的答案，因为它将改变容器的高度，而不是选项的高度。添加以下内容就足够了：.select2-container .select2-choice {height：200px; 要使其仅在选择对象后才适用，请在更改事件或类似事件上添加/修改相应的CSS。
— Motin
这将更改select2输入字段的高度，这不是要求的高度。
— 马丁·图尔诺伊
42
请不要进入和修改其他库的源代码文件。每当您想要获得新版本时，它都会中断。只需将您自己的样式更改放入第3方库之后的网站，并允许CSS覆盖以前的样式
— KyleMit 2015年
7

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

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

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

之前：

在此处输入图片说明 在此处输入图片说明

后： 使用CSS定义的高度的select-2启用的下拉列表 在此处输入图片说明

— Vadym Tyemirov
source
这不是这个问题的意思
— 马丁·图尔诺伊
7

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

.select2-container .select2-choice {
    display: block!important;
    height: 36px!important;
    white-space: nowrap!important;
    line-height: 26px!important;
}
— 阿拉ao
source
1
我正在使用select2 v 3.5.2，此代码对我有用。在他们的文档中找不到如何更改高度的信息。在添加到自定义CSS上而不是select2.css上也很有效
— dading84 '16
5

这是我对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');
});
— 布斯洪
source
这是一个。我改变了var bottomPadding = 70;
— 罗门（Rohmer）
帮助我使用Select2 v4.0.3！“旧”选项dropdownCssClass：'bigdrop'似乎不再适用于Select2v4.x。
5

样式表选择器似乎已随着时间而改变。我正在使用select2-4.0.2，正确的选择器来设置框的高度是：

.select2-container--default .select2-results > .select2-results__options {
    max-height: 200px
}
— 比利诺亚
source
.select2-results__options是其他答案遗漏的部分。我正在使用Select2 4.0.3。
— Max Malysh
3

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

最大化select2高度

这个程序包简短而简单。它神奇地扩展了Select2下拉列表以填充窗口的高度。

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

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

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

请享用！

— 德米特里·博伊科
source
1
一选二很棒。如果您有多个，它将​​应用为它所应用的最新select2计算的最新高度
— Tainmar'4
@Tainmar对。也许您已经对该插件做了一些修改。
— DmitryBoyko
3

只需添加select2.css

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

.select2-selection {
height: 34px !important;
}
— 阿德南·扎赫（Adnan Zaheer）
source
2

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

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

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

— EmacsVI
source
2

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

.select2-selection.select2-selection--multiple {
    min-height: 25px;
    max-height: 25px;
}
— Baqer Naqvi
source
2

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

/* 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;
}
— ErTR
source
2

我想出了：

.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;
}
— 阿米特·巴加特（Amit Bhagat）
source
1

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

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

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

— 布拉金德·辛格
source
1

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

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

您可以将最小高度设置为所需的最小值。高度将根据需要扩展。我个人发现填充有些不平衡，并且字体太大，因此我也在此处添加了这些内容。

— 温妮·克里斯曼
source
1

在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;
}
— ŞafakGezer
source
1

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

$('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中进行了测试）

— 斯蒂夫·范·洛弗伦（Stef Van Looveren）
source
0

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

这段代码正是这样做的：

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

— 马丁·图尔诺伊（Martin Tournoij）
source
0

试试这个，对我有用：

<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"});
— 赛富尔·拉曼（Saifur Ra​​hman）
source
0

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

这也将删除轮廓。

— 沙姆瑟·阿罕默德
source
0

对于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;
}
— 阿雷卜111
source
0

使用几行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
}
— 穆斯塔法·格里西
source
0

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

为您的元素获取ID：

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

并添加此CSS：

  #skills > span >span >span>.select2-selection__rendered{
       line-height: 80px !important;
  }
— 穆罕默德·阿斯加里
source
-1

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

问候。

有一个问题：类名select2*不能复制。

— 吉斯特零
source
-2

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

<style>
    .select2-results {
        max-height: 500px;
    }
</style>
— 阿克沙特
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.