Question

我正在尝试使用我的应用程序中选择的样式选择框。不幸的是，当涉及到具有溢出的容器时，它与本机选择框的作用不同：隐藏。

当我打开弹出窗口时，它不会（或可见）可见。

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

就是这样。

<强>解释

我们只是收集所有必需的信息来计算droplist是否溢出包装容器（设置为overcroll hidden）。一旦我们有了，我们检查它是否溢出，如果是，我们将其设置为使用基于底部的定位而不是基于顶部的定位。否则我们会回归到顶级。

这是因为droplist是相对于 Chosen 容器定位的，因此使用bottom会导致列表向上对齐。

<强>考虑

一旦droplist定位在元素上方（而不是下方），.chosen-drop box-shadow就会很烦人。为了抵消这种情况，如果元素溢出，我会动态添加一个类，如果元素不是，则将其删除。

<强>声明

此代码远完美！我没有做任何优化。我作为一个快速解决方案提供给自己，并希望与遇到同样问题的其他求职者分享。

请随时发布任何改进。

此代码假定当前版本（1.1.0）的 Chosen 的经典基本版本。

Answer 2

不可避免的，因为容器元素很好，overflow :hidden就是CSS的工作原理。解决这个问题的唯一方法是在容器外部渲染下拉菜单，然后使用绝对定位。

Answer 3

如果是link to fiddle

，请看这个

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

Answer 4

我有同样的问题 - 需要溢出：隐藏，但高度正在变化（淡入和淡出新元素）所以我用空的div解决了它与clear：两者都在容器的末尾。

JQuery选择容器中的选择框溢出：隐藏

4 个答案: