如何改变select2下拉框的高度？

Question

我喜欢来自https://github.com/ivaynberg/select2的select2框。 我使用option格式化每个元素，效果非常好。

除了因为一张图片所以选中的元素比选择框的高度更大之外，一切都很好。

我知道如何改变宽度，但是如何改变高度以便在选择元素后显示完整内容（约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>

澄清一下: 我不想改变每个选项的高度 我希望在选择子项后，选择框的高度可以改变。

因此，当页面首次加载时，它会显示"未选择子项" 当您单击下拉菜单并选择一个子项后，您将看到该子项的图片。 现在，我需要选择框扩展！否则，孩子的图片会被裁剪掉。

有人明白我的意思吗？

- relipse

---

我知道这并没有解决提问者的具体问题，但当我搜索“select2 height”时，谷歌似乎将此文章排在了第一位，所以这可能会帮助其他人。如果你正在使用Bootstrap，并且只想让你的select2输入框与其他输入框的高度相同，现在有一个可用的主题：https://github.com/select2/select2-bootstrap-theme - alexw

.select2-container .select2-selection { 高度：60像素; 溢出：自动; } 这个对我有用。 - Abu Sayem

Answer 1

你应该将以下样式定义添加到你的CSS中：

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

- Rodrigo

---

这段代码将使选择本身变大，但不会影响在进行选择后出现的选项框，这也是问题所在。这个答案是错误的，这就是为什么问题的作者添加了澄清说明。 - ftrotter

如何设置不同的高度，例如45像素？ - undefined

Answer 2

您可以使用一些简单的CSS来实现这个目标。 从我所看到的，您想要设置类名为“select2-choices”的元素的高度。

您可以使用一些简单的 CSS 来完成此操作。 根据我的理解，您希望设置具有“select2-choices”类的元素的高度。

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

这应该会给您一个固定高度为150像素的设置，如果需要可以滚动。只需调整高度，直到您的图像按预期适合即可。

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

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

默认高度为200像素，因此可以更改为所需的下拉菜单高度。

- Ryan Gill

---

我实际上不想让选项的高度不同，我希望在选择子元素后更改实际选择框的高度。 - relipse

设置.select2-choices似乎没有效果。设置ul.select2-results可以生效。 - Martin Tournoij

使用版本4，似乎应该使用.select2-results，.select2-results__options，并带有!important标记。 - Brian Leishman

使用v4版本，你需要__options，但是如果你添加了容器，比如.my-select2-wrapper .select2-results > .select2-results__options，则不需要使用!important。 - freedomn-m

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

- Abram

---

我按照你说的做了，但是在选择子项之后，选择框的高度仍然保持不变。我希望如果选择了子项，它能够展开。 - relipse

我想让select2框变窄。为此，我尝试了几种方法，包括上面的方法，但都没有得到期望的结果。// $（“#themes”）.select2（{dropdownAutoWidth:true,dropdownCssClass：“slim-select”}）; // $（“#themes”）.select2（{dropdownAutoWidth:true,containerCss:{'height':'16px','line-height':'16px'}}）; $（“#themes”）.select2（{dropdownAutoWidth:true,containerCssClass:'slim-select'}）; ---- 这些都不起作用。 - rajeev

这对我起了作用，因为我使用bootstrap，它使得输入框与其他输入框完全匹配！ - Cesar Bielich

Answer 4

这对我起作用

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

- Mohamad Hamouday

Answer 5

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

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

- Alao

---

我正在使用select2 v 3.5.2，这段代码对我有效。在他们的文档中找不到如何更改高度的方法。此外，在您的自定义CSS中添加而不是select2.css也是非常有效的建议。 - dading84

Answer 6

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

- Jason Speer

---

这是最正确的答案，因为它会改变容器的高度而不是选项。只需添加以下内容即可：.select2-container .select2-choice { height: 200px; } 要使其仅在选择对象后应用，请在更改事件或类似事件上添加/修改相应的CSS。 - Motin

这会改变select2输入字段的高度，而不是所要求的。 - Martin Tournoij

请勿进入并修改其他库的源代码文件。这会导致每次获取新版本时都出现问题。只需在第三方库之后放置自己的样式更改，并允许 CSS 覆盖先前的样式即可。 - KyleMit

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

BEFORE:

AFTER:

- Vadym Tyemirov

---

这不是这个问题所涉及的内容。 - Martin Tournoij

Answer 8

在这里我找到了一个简单的解决方案

https://github.com/panorama-ed/maximize-select2-height

maximize-select2-height

这个包很短而且简单。它神奇地扩展了你的Select2下拉框，以填充窗口的高度。

它考虑了下拉列表中元素的数量、Select2在页面上的位置、页面的大小和滚动位置、滚动条的可见性以及下拉列表是向上还是向下渲染。每次打开下拉列表时，它都会自动调整大小。并且压缩后，它只有大约800字节（包括注释）！

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

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

祝您愉快！

- NoWar

---

这对于一个select2很棒。 如果您有多个，它将应用于最新的select2计算出的最新高度。 - Tainmar

@Tainmar 对的。也许你需要稍微修改一下这个插件。 - NoWar

Answer 9

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

- booshong

---

这就是它。我改变了 var bottomPadding = 70;。 - tim-phillips

帮我解决Select2 v4.0.3的问题吧！“旧”的选项dropdownCssClass: 'bigdrop'似乎在Select2 v4.x中不再起作用了。 - user4420255

Answer 10

看起来样式表选择器随着时间的推移而发生了变化。我正在使用select2-4.0.2，当前正确的选择器以设置框高度为:

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

- Eaten by a Grue

---

.select2-results__options是其他答案缺失的部分。我正在使用Select2 4.0.3。 - Max Malysh