容器中的 JQuery 选择选择框溢出 : hidden

Question

我试图在我的应用程序中使用 chosen 来设置选择框的样式。不幸的是，当涉及到带有 overflow: hidden 的容器时，它的行为与 native 选择框不同。

当我打开弹出窗口时，它不会(或永远)不可见。

HTML:

<div class="layoutContainer">
    <select class="select-chosen">
        <option>Option A</option>
        <option>Option B</option>
        <option>Option C</option>
    </select>
    <select>
        <option>Option A</option>
        <option>Option B</option>
        <option>Option C</option>
    </select>
</div>

CSS:

.layoutContainer{
    background: #660066;
    overflow: hidden;
    height: 40px;
}

JavaScript:

$(document).ready(function(){
    $(".select-chosen").chosen({
        disable_search : true,
        width: "150px"
    });
});

这是对应的JsFiddle

这个问题有解决方案吗？

Answer 1

我今天遇到了同样的问题，做了一些基础研究并想出了一个快速的解决方案。

在函数 results_show() 中，找到以下几行:

this.search_field.focus();
this.search_field.val(this.search_field.val());
this.winnow_results();

在此之下，添加以下代码。

案例#A

你的容器就是窗口。

代码:

var _cont=$(window);

案例#B

您使用其他一些设置为溢出隐藏的容器。在此示例中，这将是一个给定类名 .layoutContainer 的元素。

代码:

var _cont=$(this.container).parentsUntil('.layoutContainer').parent();

---

然后，在上面任意一行的下方，添加以下代码:

var _containerHeight = _cont.height();
var _elementHeight = $(this.container).find('ul').height();
var _elementTop = $(this.container).offset().top;
var _xh=$(this.container).outerHeight();

if (_containerHeight - (_elementHeight + _elementTop) + _xh < 0) {
  this.dropdown.css({
      bottom: _xh,
      top: 'auto'
  });
} else {
  this.dropdown.css({
      top: _xh,
      bottom: 'auto'
  });
}

就是这样。

解释

我们只是收集所有必需的信息来计算下拉列表是否溢出包装容器(设置为过度滚动隐藏)。一旦我们有了它，我们检查它是否溢出，如果是，我们将它设置为使用基于底部的定位而不是基于顶部的定位。否则我们恢复到基于顶部的。

之所以可行，是因为下拉列表相对于 Chosen 容器定位，因此使用 bottom 会导致列表向上对齐。

注意事项

一旦下拉列表位于元素上方(而不是下方)，.chosen-drop box-shadow 有点烦人。为了解决这个问题，我在元素溢出时动态添加了一个类，如果元素没有溢出则将其删除。

免责声明

这段代码远并不完美!我没有做任何优化。我将它作为快速修复提供给自己，并想与遇到相同问题的其他求职者分享。

请随时发布对此的任何改进。

此代码采用当前版本 (1.1.0) 的 Chosen 的经典基本版本。