0

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

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

网页：

<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

这个问题有解决方案吗？

4

4 回答 4

2

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

在函数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-dropbox-shadow 就有点烦人了。为了解决这个问题，如果元素溢出，我会动态添加一个类，如果元素没有溢出，则将其删除。

免责声明

这段代码远非完美！我没有做任何优化。我将它提供给自己作为快速解决方案，并希望与遇到相同问题的其他寻求者分享。

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

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

于 2014-03-13T21:19:54.567 回答
0

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

于 2013-08-16T08:08:58.647 回答
0

看看这个，如果它的链接到小提琴

.layoutContainer{
    background: #660066;
    height: 40px;
}
.overflowHidden{
    overflow:hidden;
}
于 2013-08-16T10:00:57.173 回答
0

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

于 2013-11-04T13:35:54.073 回答