Chosen: 当被选择放置在具有“溢出：隐藏”的区域时，被“切割”。

创建于 2011-07-27  ·  128评论  ·  资料来源: harvesthq/chosen

我有一个带有表单的 div。 div 在 css 中有“溢出：隐藏”选项。
当 Chosen 被创建时，它低于 div 的底线，它被剪切。

这是一个屏幕截图：

Imgur

picture ethaniel
👍1

最有用的评论

.chosen-container.chosen-with-drop .chosen-drop {
    position: relative;
}
picture AgelxNash 于 2016-11-10
👍10 ❤2

所有128条评论

这与问题 #59 相同

reconbot picture reconbot 于 2011-07-27

这不是不可避免的，因为容器元素很好，“溢出：隐藏”这就是 CSS 的工作方式。 解决这个问题的唯一方法是在容器外部渲染下拉菜单，然后使用绝对定位。

dfischer picture dfischer 于 2011-07-28

是的，我同意 dfischer。 似乎不是一个选择的问题。 根据定义，overflow 属性指定如果内容溢出元素边界会发生什么。 如果您不想隐藏 _overflow_，请更改该属性。

johnnyfreeman picture johnnyfreeman 于 2011-07-28
👍1

虽然如此，但我认为这是对话框的常见用例。 （特别是jquery对话框）

reconbot picture reconbot 于 2011-07-28
👍1

这是一个常见的用例，但是基于这张票，就像我之前提到的……如果你想完成这个，整个结构和实现必须改变。

您_需要_在容器外部进行渲染以实现此目的，然后使用 jQuery/JS 魔术来确定相对于触发器的位置。

jQuery Dialog 的情况不依赖于容器元素，因此它仅使用基于对话框的中心尺寸和宽度的定位。

dfischer picture dfischer 于 2011-07-28

这更像是一个 CSS 问题，而不是一个选择的问题。 不要把溢出：隐藏在容器上。 如果你正在这样做，你将不得不使用另一种技术来清除它下面的浮点数。

dfischer picture dfischer 于 2011-07-28
👍2

我刚刚写了一些我认为可以满足您需求的代码：

$.fn.extend({
选择：功能（数据，选项）{
if ($(this).parent().css("overflow") == "hidden") {
//获取父子之间的偏移量以计算差异
//当我们推到绝对
var y = $(this).offset().top - $(this).parent().offset().top,
x = $(this).offset().left - $(this).parent().offset().left,
$t1 = $("<div/>", {
css：{
"位置": "相对",
“高度”：$(this).parent().height,
“宽度”：$(this).parent().width
}
}),
$t2 = $("<div/>", {
css：{
"位置": "绝对",
“顶”：y，
“左”：x
}
});
$t1.insertBefore($(this).parent());
$(this).parent().appendTo($t1);
$t2.appendTo($t1);
$(this).appendTo($t2);
}
返回 $(this).each(function (input_field) {
if (!($(this)).hasClass("chzn-done")) {
返回新的选择（这个，数据，选项）；
}
});
}
});

（顺便说一句，我今天是 github 的新手，所以如果我应该在其他地方发布代码，请告诉我）

该代码有效地执行以下操作：

  1. 计算选择框和父级之间的偏移量。
  2. 创建一个与隐藏的溢出具有相同尺寸的父 div 并设置为相对。
  3. 为选择框创建一个父元素，使用步骤 1 中的 x 和 y 偏移量将元素创建为绝对元素。
  4. 在选择的父级之前插入新的父级，在新父级内附加溢出 div，在主父级内附加新的选择父级，将选择附加到新的子级父级。
medelbrock picture medelbrock 于 2011-07-28

有趣的想法马修，但我认为这不会在 jQuery-UI 对话框中工作，是吗？

更有可能下​​拉元素 (.chzn-drop) 需要从 .chzn-container 中拉出到文档正文...

tompaton picture tompaton 于 2011-07-29

只需向页面添加样式，您的答案是肯定的：

.ui-dialog{溢出：可见； }

medelbrock picture medelbrock 于 2011-07-29
👎37 👍1

对我不起作用，因为我使用 div 作为列（而不是 td 和表）创建我的页面。
我使用“溢出：隐藏”来阻止失控的内容破坏邻居的div。

我想你们中的许多人都使用相同的结构。

ethaniel picture ethaniel 于 2011-07-29

那是行不通的，因为对话框被设置为overflow:auto所以他们可以
如有必要，有滚动条。

2011 年 7 月 29 日星期五晚上 11:47，ethaniel
回复@reply.github.com
写道：

对我不起作用，因为我使用 div 作为列（而不是 td 和表）创建我的页面。
我使用“溢出：隐藏”来阻止失控的内容破坏邻居的div。

我想你们中的许多人都使用相同的结构。

直接回复此邮件或在 GitHub 上查看：
https://github.com/harvesthq/chosen/issues/86#issuecomment -1681303

tompaton picture tompaton 于 2011-07-29

在我们进一步讨论这个话题之前，我所做的是理论上的修正。 它不能应用于所有场景，因为只需要一个具有反属性的元素即可将其搞砸。 上述溢出可见的解决方案仅适用于对话框选项resizable:false。 为什么需要在对话框之外选择溢出？

medelbrock picture medelbrock 于 2011-07-29

好的，这里有一堆截图，希望能澄清这个问题。

http://i.imgur.com/9ZY9O.png
http://i.imgur.com/c2PLo.png
http://i.imgur.com/1oqZ7.png
http://i.imgur.com/ZBrQj.png

屏幕截图 1 和 2 显示了它的行为，没有足够的空间
对话框“内部”的下拉菜单，因此它会滚动并隐藏为
结果。 这使用起来非常笨拙且丑陋，而不是内置的
选择控件工作（它们显示在内容的顶部，无论
它们在里面有多深，或者它的溢出风格是什么。）

截图 3 和 4 显示了我目前的解决方法，即把一个整体
下拉列表下方的空间堆。 这也很丑陋，使表格
更难使用。

所以，总而言之，真正的重点是本机选择控件不是
仅限于它们的父容器，如果可能，选择的
增强的选择控制也不应该是，因为它被设计为
本机控件的替代品。

tompaton picture tompaton 于 2011-07-29

这在理论上是可以做到的，但它需要一个完全不同的构建/定位系统，由所选的插件组成。 此更改将是广泛的，需要对当前插件进行大约 30% 的重写。 我认为这是一个功能请求而不是一个错误。 所有浏览器都有选择元素的默认渲染。Chosen 使用 div 复制它，但不被视为选择元素。

medelbrock picture medelbrock 于 2011-07-29

就像我说的，做到这一点的唯一方法是在触发元素的外部绝对定位。 没有别的办法。 更正@medelbrock

dfischer picture dfischer 于 2011-07-29

虽然选择表现得像浏览器小部件会很好，但我同意这应该被视为一个功能而不是一个错误。 我们目前可以设置最大高度吗？

reconbot picture reconbot 于 2011-07-30

@veloper ：我div.chzn-drop仍然包含在对话框中，所以无论它是否绝对定位，都会被剪裁。

阻止这种情况的唯一方法是将div.chzn-drop拉出对话框并使其成为<body> ，但正如每个人都指出的那样，这比任何人都发生了更大的变化愿意动手尝试。

tompaton picture tompaton 于 2011-08-02

不幸的是，使用overflow:visible不是一种选择，如有必要，对话框需要是可滚动的。

tompaton picture tompaton 于 2011-08-05
👍5

我想我已经通过将下拉位置设置为绝对位置以及每当显示下拉位置设置它的位置来解决这个问题。
例如更改（编辑 javascript）

this.dropdown.css({
    "top": dd_top + "px",
    "left": 0
});

到

var parent = this.dropdown.parent();
var offset = parent.offset();
dd_top = offset.top + parent.outerHeight();
dd_width = parent.width();
this.dropdown.css({
    "top": dd_top + "px",
    "left": offset.left,
    "width": dd_width + "px"
});
chris-herring picture chris-herring 于 2011-08-15
👍1

我自己在尝试让 Chosen 在 Wijmo/jQuery UI 对话框中工作时遇到了这个问题。 我在这里可能已经超出了我的范围，但是是否有一个相当简单的修复方法可以使“下拉”部分在隐藏时具有“显示：无”，然后在显示时具有“显示：阻止”？ 当下拉菜单打开时，您仍然会产生滚动条，但这可能比始终存在滚动条要好。

Polemarchus picture Polemarchus 于 2011-08-19
👍1

修复（在 Chrome 13、Firefox 7 和 IE 9 中测试）：

在 selected.css 中：

.chzn-容器 .chzn-drop {
位置：固定；
}

并在 Chosen.prototype.results_show 中

var offset = this.container.offset();
this.dropdown.css({
"top": (offset.top+dd_top) + "px",
"left": offset.left + "px",
“显示”：“阻止”
});

http://img30.imageshack.us/img30/4094/chosen3.png

levushka picture levushka 于 2011-09-05

就是这样，很好的想法@levushka。 现在在我的分支中解决： https :

tompaton picture tompaton 于 2011-09-05

好吧，它比那更复杂一点。 如果滚动页面，上述修复将不起作用。

我已经用一个修复它的变更集更新了我的存储库，现在下拉列表的位置正确，但是如果在下拉列表可见时滚动页面，它不会按预期移动。 这很烦人，但不是表演障碍。

tompaton picture tompaton 于 2011-09-06

iOS 5 _可能_解决了这个问题，但 iOS 目前不支持位置：以与桌面浏览器相同的方式修复。 Chosen 在桌面上工作得非常好，但这可能会限制它在设计不佳的移动浏览器上的使用......

我不只是在这里选择 Apple，旧版本的 Android 也缺乏对 position: fixed 的支持。

jokeyrhyme picture jokeyrhyme 于 2011-09-07

从 jQuery 1.7（尚未发布，但在候选版本中）开始，他们有一个内置的 CSS Position Fixed 支持测试：
http://bugs.jquery.com/ticket/6809

可能值得检测 jQuery 1.7 并使用它们的结果，或者复制它们的代码并以其他方式获得单独的结果。

jokeyrhyme picture jokeyrhyme 于 2011-10-02

+1 表示 body 元素末尾的位置。

检查 jquery 小部件“自动完成”。 这个问题的很好的解决方案：

http://jqueryui.com/demos/autocomplete/

顺便说一句，很棒的插件。

fluxsaas picture fluxsaas 于 2011-11-09

我主要在 webkit 浏览器中遇到了这个问题。 IE 只是在选择时变得精神，所以如果 ie，我将其禁用。 使用 jquery，我检查浏览器是否是 webkit 浏览器，并调整包含我选择的 div 的溢出，如下所示：

if($.browser.webkit) $(this).css("overflow",($(this).is(":visible"))?"visible":"hidden");

这是包含所选内容的 div。

frostyoni picture frostyoni 于 2011-12-08

+1 @levushka和@tompaton不完美，但足够好。 仅仅 ：）

JonoB picture JonoB 于 2012-03-07

@levushka解决方案很棒，但它是全局的......所以在 window.top 向下滚动并单击选择时，它会在错误的位置向下滚动。 所以这里是普通页面和弹出窗口的解决方案

在 Chosen.prototype.results_show 中

代替：

  this.dropdown.css({
    "top": dd_top + "px",
    "left": 0
  });

和：

if($('.popup').length!=0) {

  var offset = this.container.offset();
  this.dropdown.css({
    "top": (offset.top+dd_top) + "px",
    "left": offset.left + "px",
    "display": "block"
  });

} else {

  this.dropdown.css({
    "top": dd_top + "px",
    "left": 0
  });

}

CSS：

   .popup .chzn-container .chzn-drop { position:fixed; }

如果你使用 jQuery UI 或其他东西，你可能会遇到 z-index 的问题，所以将选择的 z-index 设置为更高的值（jQuery UI 是 1010+）

现在它在 FF 和 Chrome 中工作，你需要：

     .popup { overflow-x:visible; overflow-y:visible; }

情人元素可以有overlow:hidden没有问题。

Evandar276 picture Evandar276 于 2012-03-29

为什么不渲染body中的下拉菜单，使用Jquery UI的position函数来定位box呢？ http://jqueryui.com/demos/position/。 这是用于许多 jquery ui 小部件的标准方法。

$( ".czn-drop" ).position({
的： $( "#container" ),
我的：“左上角”，
在：“左下角”，
});

pohnean picture pohnean 于 2012-04-22

请原谅我闯入，我在 jQueryUI 对话框中显示选择的下拉列表时遇到了同样的问题。
我尝试了通常的溢出内容，但这弄乱了我的其他对话框。

相反，我所做的是将我的对话框设置为固定高度，并将所选下拉菜单也设置为固定高度。
有一个选项可以从选择的选项而不是 css 中执行此操作会很好。

.chzn-drop {
溢出：自动；
最大高度：75px；
}

也许这对其他人有帮助。

noir2501 picture noir2501 于 2012-05-03

为一个相当 n00bish/RTFM 问题的借口，但我怎样才能在容器外呈现下拉列表（比如，在body ）？ 现在，我唯一想到的就是 fork 插件并将那段代码推入其中。 必须有一种更优雅的方式来实现这一点。

aL3xa picture aL3xa 于 2012-05-06

当下拉菜单打开/关闭时，选择的事件是否会触发。 如果是这样，我可以将父 div 的溢出设置更改为可见，然后返回。 我试过：

$(".chzn-drop").show(0, function () { 
   $(this).parents("div").css("overflow", "visible");
});

而且，是的，它奏效了。 但是，当我添加：

$(".chzn-drop").hide(0, function () {
   $(this).parents("div").css("overflow", "");
});

它不再起作用了。 我假设是因为我在表单上有几个选择的控件。 如果我可以在打开/关闭事件中添加此代码，那么我认为它会让我到达我想去的地方。

PilotBob picture PilotBob 于 2012-05-08

您可以收听在原始选择元素上分派的liszt:showing_dropdown和liszt:hiding_dropdown

stof picture stof 于 2012-05-08

太好了......所以这解决了我的问题：

$(".chzn-select").on(" liszt:showing_dropdown ", function () {
$(this).parents("div").css("overflow", "visible");
});
$(".chzn-select").on(" liszt:hiding_dropdown ", function () {
$(this).parents("div").css("溢出", "");
});

当然，它可能不适用于所有布局。

谢谢...鲍勃

PilotBob picture PilotBob 于 2012-05-08
👍1

我已经分叉了代码来创建<body/>的下拉子项。 我还没有对它进行足够的测试，但它在这里完美地工作 -> https://github.com/gil/chosen

你能看看它是否解决了你的问题，@tompaton？ 我想我现在只需要检测滚动，手动修复位置。

gil picture gil 于 2012-05-15

叉子为我解决了显示问题，并且在页面底部运行良好，它将显示的高度限制在合理的范围内。 但是，fork 停止了多选功能的工作。

geoffweatherall picture geoffweatherall 于 2012-05-16

@geoffweatherall真的吗？ 好的！ :D 关于多选的问题，是什么停止了工作？ 你能不能试试example.jquery.html文件并告诉我它是否不起作用？ 对我来说似乎没问题。

gil picture gil 于 2012-05-16

是的，示例工作正常（FF 12）。

单个选择示例位于一个相当简单的 html 页面中，其中包含使用隐藏溢出的“面板”。 但是，多选示例在使用 colorbox (http://www.jacklmoore.com/colorbox) 创建的“对话框”中 - 不要问我为什么，我到达时项目就是这样。 我想这可能与此有关，我会调查一下。

geoffweatherall picture geoffweatherall 于 2012-05-16

分叉修复了我们应用程序中许多位置的截止问题，包括未嵌套在颜色框内的多选 (http://www.jacklmoore.com/colorbox)。 我相信 colorbox 的问题不是选择的错。 很棒的叉子:-)

geoffweatherall picture geoffweatherall 于 2012-05-16

实际上，我发现示例页面 (example.jquery.html) 中显示的 fork 存在问题。 对于多选控件，如果在控件中单击以打开选项列表，然后使用向上箭头和向下箭头键导航列表，则选项列表会意外移动到页面顶部。 单个选择不会发生此问题。 在 FF12、Chrome 18 和 IE8 中测试。

geoffweatherall picture geoffweatherall 于 2012-05-16

@geoffweatherall也许

.chzn-drop {
    z-index: 999999 !important;
}

或者尝试将颜色框不透明度设置为 0.1 以检查是否可以看到颜色框下方的下拉列表。

另一个问题，关于钥匙，我会试着找到一些解决办法。 我现在做的项目中没有使用多选，所以差点没测试。 更多地关注单选选项。

gil picture gil 于 2012-05-16

好的，我试过这个，我确实看到了下拉菜单，但是位置是错误的。 它们在文本框下方下降了很多。 这是一个显示行为的 jing。 http://screencast.com/t/c4PCIHC176RX

PilotBob picture PilotBob 于 2012-05-17

嗨吉尔，

我试过你的版本，它的工作原理！ 太感谢了！
只有一件小事停止了工作。它是 disable_search_threshold 选项。 搜索字段不会消失。

你有什么想法吗？

谢谢！

pruimmartin picture pruimmartin 于 2012-05-26

没关系！ 我设法自己修复了它，但是..也许你也应该在代码中改变它：

改变：

    if (this.form_field.options.length <= this.disable_search_threshold) {
      this.container.addClass("chzn-container-single-nosearch");
    } else {
      this.container.removeClass("chzn-container-single-nosearch");
    }

到

    if (this.form_field.options.length <= this.disable_search_threshold) {
      this.dropdown.addClass("chzn-container-single-nosearch");
    } else {
      this.dropdown.removeClass("chzn-container-single-nosearch");
    }
pruimmartin picture pruimmartin 于 2012-05-26

这个分叉是什么状态？ 合并到master了吗？ 还是还在测试中？

PilotBob picture PilotBob 于 2012-06-06

另一个问题.. fork 似乎对我有用，但在 firefox 中我看到页面底部的下拉 div。 似乎负左位置不会将其移出显示区域。 也许是由于我有其他一些风格......想。 任何的想法？ 为什么不将显示设置为无？

PilotBob picture PilotBob 于 2012-06-06

很久以前我为我的原始修复提出了一个拉取请求，但它是
从未接受（不知道为什么）。

此线程中建议了许多其他调整
从那以后，我还没有和他们中的任何一个玩过，也没有检查过
看看是否有人有一个包含它们的叉子（如果没有
一，应该有人创造一个，如果有，那将是一个很好的
回答你的问题。）

2012 年 6 月 7 日星期四上午 6:44，Bob Archer
回复@reply.github.com
写道：

另一个问题.. fork 似乎对我有用，但在 firefox 中我看到页面底部的下拉 div。 似乎负左位置不会将其移出显示区域。 也许是由于我有其他一些风格......想。 任何的想法？ 为什么不将显示设置为无？

直接回复此邮件或在 GitHub 上查看：
https://github.com/harvesthq/chosen/issues/86#issuecomment -6162299

tompaton picture tompaton 于 2012-06-07

我尝试了所有这些，但没有一个对我有用，因为我有多个隐藏的字段集和一个滚动的长表单。 因此，我的解决方案是最初将下拉菜单设为静态和隐藏，并在打开时显示，这会拉伸父容器。 这适用于我的所有表单，即使它位于屏幕的最底部。

在 Chosen.prototype.results_show 中：

      this.dropdown.css({
        "top": dd_top + "px",
        "left": 0,
        "display": "block"
      });

在 Chosen.prototype.results_hide 中：

      this.dropdown.css({
        "left": "-9000px",
        "display": "none"
      });

在 selected.css 中：

.chzn-container .chzn-drop {
  position: static;
  display: none;
}
kaoskitn picture kaoskitn 于 2012-06-08

@gil ，我只想说谢谢你的 fork，因为这个 bug，我正准备放弃使用 Chosen 做我的项目。

老实说，我很惊讶收获人员没有看到将浮动弹出窗口绑定到受限容器所固有的缺陷。 即使不考虑溢出规则，对于不知道人们可能会围绕小部件做什么的公共图书馆来说，这也不是一个好主意。

Twipped picture Twipped 于 2012-06-19

大家好！ 很高兴知道我的叉子正在帮助一些人解决这个问题...... :)

我不知道他们是否打算更改代码或与这里提出的一些解决方案合并。 我们不知道是否可以假设这是所有情况下的最佳解决方案。 让我们继续测试，并可能发送包含所有更改的拉取请求。

@geoffweatherall我已经用我认为可以帮助您解决键盘问题的东西修复了代码。 请告诉我它是否有效！ ;)

@PilotBob你还有那个 jing 的问题吗？ 关于另一个问题，我已经在 Firefox 12 上测试了example.jquery.html ，它似乎没问题。 也许你可以尝试用left:-9000px替换你能找到的所有display:none 。 我不太了解代码，无法告诉您，但由于我将display:block为results_show() ，因此它可能对您有所帮助。

@pruimmartin感谢您的修复，很抱歉花了太长时间回复。 我已经在我的代码上合并了修复程序！

gil picture gil 于 2012-07-02

gil - 不，它似乎不再发生了，我也没有改变任何东西。 我希望其他地方可能有一个 js 错误导致它。 但是，我在选择时还有其他问题，我一直在考虑用其他东西替换它。 这主要是因为缺少在主服务器上进行的更新。

PilotBob picture PilotBob 于 2012-07-02

@PilotBob我正在考虑这个项目： https :
他们有同样的溢出问题，但我认为他们计划在版本 3 上进行更改。

gil picture gil 于 2012-07-02

@gil - 您的解决方案效果很好，但li.search-field宽度固定为25px 。 换句话说，当我加载您的示例页面时，菜单精美地附加到body元素，但占位符文本和任何输入都被限制在25px宽。 事实上，看起来search_field_scale方法根本不存在。 我在这里错过了什么吗？

rreusser picture rreusser 于 2012-07-05

@rreusser我删除了方法search_field_scale ，因为它仅用于多选并正确计算位置。 对于这个分叉来说，这不再是必要的了。 您正在测试什么浏览器/版本/操作系统？ 对我来说，搜索字段大小在example.jquery.html处是正确的。

gil picture gil 于 2012-07-05

@rreusser嘿，对不起。 现在我明白出了什么问题。 今天晚些时候我会尝试修复它。

gil picture gil 于 2012-07-05

没问题，@gil！ 感谢及时回复！ 我需要做一些更多的实验，但允许附加到任意元素也可能很有用 - 我认为这也应该是非常微不足道的。 我在滚动 div 中有一个选择框，虽然您的解决方案可以防止剪切，但滚动时菜单不会随 div 移动。 我认为所有必要的只是在某处增加一个 div，但这需要一些修补。

rreusser picture rreusser 于 2012-07-05

@rreusser我已经恢复了那个提交并修复了我试图以不同方式修复的问题。 你能再试一次并告诉我它是否适合你吗？

关于附加到不同的元素，我正在考虑使其可配置。 但是您可以通过一些配置来解决滚动问题。 当您的<select />不是滚动 div 的直接子级时，请尝试以下操作：

$(".your-select").chosen({
    overflow_container: $(".scrolling-div")
});

但是，如果您的<select />的父节点是您的<div /> ，则不需要这样做。

gil picture gil 于 2012-07-06

@gil ，这个 fork 会合并到 master 吗？ 还是还在测试中？ 我也遇到了 fork 中的键盘控件问题，向下箭头键不会触发 results_show 或 results_toggle 方法。 谢谢 ：-）

myfriendtodd picture myfriendtodd 于 2012-08-08

@myfriendtodd我还不知道，也许我可以在每个人都认为它稳定时发送一个拉取请求。 但我仍然认为它需要更多的测试。 这个周末我会尝试修复键盘问题。 谢谢！

gil picture gil 于 2012-08-25

@myfriendtodd嘿，我想我已经解决了。 你能在你的项目上测试一下吗？ ;)

gil picture gil 于 2012-08-27

谢谢@gil会让你知道结果如何。 感谢你的帮助 ：-）

myfriendtodd picture myfriendtodd 于 2012-08-27

@gil非常感谢您的分叉。 这个修复对我来说效果很好 - 太棒了！

但是，我使用 Kickstrap 来设计 Chosen 的样式以适应 Twitter Bootstrap。 这导致 Chosen with this fix 被严重破坏 - 下拉列表的内容出现在页面底部，没有样式 - https://skitch.com/dyad/euys2/login 。 据我所知，Kickstrap 所做的就是覆盖默认的 Chosen 样式。

可以在https://github.com/ajkochanowicz/Kickstrap/blob/master/extras/chosen/chosen.less找到用于更改样式的 LESS 文件 - 您的修复编辑是否有任何明显的内容可以解释为什么会这样可能正在发生？

确实非常感谢。

conatus picture conatus 于 2012-09-12

大家好，

我正在使用不同的方法开发一个新版本，而不是将下拉列表附加到正文中。 这个版本更干净，并且有望减少许多错误，因为变化不是那么大。 大家可以试试看有没有效果？ 它在一个新的分支上：

https://github.com/gil/chosen/tree/new_version

@conatus你也可以试试这个版本吗？ 分支“master”上的最后一个版本对 css 文件进行了很多更改，此版本仅更改了 3 行。 在 Kickstrap 的 Chosen css 上更改这些：

  • 第 4 行，由“位置：相对；”更改到“位置：静态；”。
  • 第 13 行更改为“位置：绝对；” 到“位置：固定；”。
  • 在第 128 行，在“left: -9000px;”下方插入新行“display: none;”

我希望这会让它起作用！ ;)

gil picture gil 于 2012-09-14

另外，这个新版本是与harvethq的master分支同步的！

gil picture gil 于 2012-09-14

对不起，我之前没有跟进，但我们进入了项目的不同部分，这很快就消失了！ 我会测试一下，一有机会就告诉你。 非常感谢您的持续努力！

rreusser picture rreusser 于 2012-09-14

@gil - 我正在测试您的版本，虽然效果很好，但有一个小问题：当

我只能想到两种可能的解决方案：
1) 如果选择被放置在一个固定定位的元素内，下拉菜单应该被放置在 chzn-container 内并被赋予一个固定的位置。 顶部位置应由容器的固定位置计算
2) 滚动时重新计算下拉位置

ragulka picture ragulka 于 2012-09-17

第三个选项是在选择处于固定位置容器时使下拉菜单固定。

Twipped picture Twipped 于 2012-09-17

@ragulka @ChiperSoft我看到了问题......只是为了确定，这个 jsfiddle 是否复制了你们所说的？ http://jsfiddle.net/QY256/

我会试着做点什么。 有一个名为overflow_container的新选项可以处理滚动问题，正如您在仅滚动 div 时所看到的那样。 但这里的问题是当你滚动窗口时，它会被错误地定位。

我正在考虑在滚动时关闭 Chosen，因为处理滚动会导致其他一些小问题（例如，当您的<select />仅可见一半时）。

gil picture gil 于 2012-09-18

@ragulka @ChiperSoft另外，作为临时修复，你们可以尝试更改update_position方法中的

"top": (offset.top + dd_top) + "px",

到：

"top": (offset.top + dd_top - $(window).scrollTop()) + "px", ?

gil picture gil 于 2012-09-18

@gil是和否 - 您提供的 jsfiddle 确实显示了问题，但对我而言，它出现在我滚动正文时（我的固定元素没有任何滚动条）。 在您的 jsfiddle 中，当我滚动固定元素的内容时似乎会出现问题，但在滚动正文时不会出现问题。

ragulka picture ragulka 于 2012-09-18

@ragulka我知道这不是最好的解决方案，但我想我已经在这里解决了。 你可以试试吗？ 像我说的那样，在第 640 行进行更改，然后像这样应用选择：

$(".your-select").chosen({
    overflow_container: $(".your-fixed-div").add( document )
});

这应该处理 div 和document上的滚动，并修复位置。

但是就像我说的那样，我想我稍后会更改此设置，以便在用户滚动某些内容时隐藏 Chosen。

gil picture gil 于 2012-09-18

这可能不是一个选择的错误，但我切换到 select2 作为选择的替代品，问题消失了，不需要做任何解决方法。

tetherit picture tetherit 于 2012-09-22

非常感谢。

在 Kickstrap 更新的中间时间 - https://github.com/ajkochanowicz/Kickstrap/blob/beta/assets/Kickstrap/apps/chosen/chosen.css。 您的新分支运行良好，但是您建议对 Kickstrap CSS 进行的更改似乎没有效果。 发生的事情是下拉本身不再出现。 有任何想法吗？ 非常感谢。

conatus picture conatus 于 2012-10-02

谢谢@gil！！！ 您的分支 (https://github.com/gil/chosen/tree/new_version) 解决了我在这个特定问题上的问题。

aruizca picture aruizca 于 2012-11-07

感谢所有的建议。 我对上面的建议做了一些细微的修改，以使下拉菜单与 Bootstrap v2.1.1 modals 和 Chosen v0.9.11 一起使用。 在滚动页面后重新打开 .chzn-drop 后，需要进行一些小的更改才能使其正确定位。

希望这对其他人有帮助。

CSS
.modal .chzn-container .chzn-drop {
  position:fixed;
}
Javascript
Chosen.prototype.results_show = function() {

      var self = this;

      // hide .chzn-drop when the window resizes else it will stay fixed with previous top and left coordinates
      $(window).resize(function() {
        self.results_hide();
      });

      var dd_top;
      if (!this.is_multiple) {
        this.selected_item.addClass("chzn-single-with-drop");
        if (this.result_single_selected) {
          this.result_do_highlight(this.result_single_selected);
        }
      } else if (this.max_selected_options <= this.choices) {
        this.form_field_jq.trigger("liszt:maxselected", {
          chosen: this
        });
        return false;
      }
      dd_top = this.is_multiple ? this.container.height() : this.container.height() - 1;
      this.form_field_jq.trigger("liszt:showing_dropdown", {
        chosen: this
      });

      if($('.modal.in').length) {
        // when in a modal get the scroll distance and apply to top of .chzn-drop
        var offset = this.container.offset();
        var scrolly = parseInt($(window).scrollTop(), 10);
        scrolly = scrolly < 0 ? 0 : scrolly;
        var toppy = offset.top+ dd_top - scrolly;
        this.dropdown.css({
          "top": toppy + "px",
          "left": offset.left + "px"
        });
      } else {
        // proceed as normal
        this.dropdown.css({
          "top": dd_top + "px",
          "left": 0
        });
      }

      this.results_showing = true;
      this.search_field.focus();
      this.search_field.val(this.search_field.val());
      return this.winnow_results();
    };
robmcguinness picture robmcguinness 于 2012-12-22

所以我在 Chosen 0.9.11 上玩了一点，我确定了我需要在 Chosen 上做的改变......

我在一个经过大量修改的 jQueryUI 对话框中使用了 Chosen，该对话框是可拖动的并且具有溢出的最大高度：滚动。

为了让 Chosen 表现得像我想要的那样，我将“.chzn-container .chzn-drop”更改为“ position:fixed ”并添加了“ display:none ”。 然后在“Chosen.prototype.results_hide”中，我将“ display:none ”添加到“this.dropdown.css”...

this.dropdown.css({
    "left": "-9000px",
    "display": "none"
});

在“Chosen.prototype.results_show”中，我用“ display:block ”替换了“this.dropdown.css”的内容。
为了获得 .chzn-drop div 的正确位置，我添加了 jQueryUI 位置函数。

this.dropdown.css({
    "display": "block"
}).position({ my: 'left top-1', at: 'left bottom', of: this.container, collision: 'fit',  });

在“Chosen.prototype.search_field_scale”改变...

return this.dropdown.css({
    "top": dd_top + "px"
});

... 到 ...

return this.dropdown.position({ my: 'left top-1', at: 'left bottom', of: this.container, collision: 'fit',  });

现在我只剩下一个问题了：

当有人开始移动对话框时，我需要收听 jQuery UI Dialog 拖动事件以关闭 Chosen drop。 我已经实现了这一点，但代码很脏:-)

milaan-muc picture milaan-muc 于 2013-02-04

这个分支https://github.com/gil/chosen/commits/new_version的非平凡修复有没有可能被移植到 GWThosen？
GWT选择是真棒。 但是，在当前状态下，它根本不能与 LayoutPanels 一起使用。

sillysachin picture sillysachin 于 2013-05-21

如何向 Chosen 库添加一个新功能，只需添加不同的或新的类，列表就会呈现在文本字段上方？ 这样脚本就不必在包装溢出：隐藏div 之外呈现列表，并且可能会解决其他人遇到的大多数问题。 PS：我不认为这是一个问题，因为溢出：隐藏所做的正是应该做的。 有特色就更好了。 谢谢。

giulianoliker picture giulianoliker 于 2013-07-18

+1 Klikerko 的建议。

markgibbons25 picture markgibbons25 于 2013-07-19

就像@sillysachin 一样，我使用 GWThosen 并且我对 LayoutPanels、 overflow:hidden和 ChosenListBox 也有同样的问题：/

有谁知道解决这个问题？ @sillysachin自从你在这里发帖以来，你有什么想法吗？

提前 Tnx :)

djgouze picture djgouze 于 2013-07-26

我们通过从父容器中拉出下拉 div 来临时修补它。 不幸的是，我被发布粉碎所淹没，在提交之前需要时间清理补丁。

sillysachin picture sillysachin 于 2013-07-28

https://github.com/tompaton/chosen/commit/3d9be332de23bfe69d53c7640e829e879e084983 中的这个提交修复得相当好。 它是最新的，但我只为 jQuery 做。

tompaton picture tompaton 于 2013-08-07

@robmcguinness我不得不对其进行一些修改才能工作。 但是，它会产生一个错误。 你不能关闭下拉菜单的地方。

 Chosen.prototype.results_show = function() {

 this.dropdown.css({
      "display": 'block'
    });

  var dd_top;
  $(window).resize(function() {
    this.results_hide();
  });

  if (this.is_multiple && this.max_selected_options <= this.choices_count()) {
    this.form_field_jq.trigger("chosen:maxselected", {
      chosen: this
    });
    return false;
  }

  dd_top = this.is_multiple ? this.container.height() : this.container.height() - 1;
  this.container.addClass("chosen-with-drop");
  this.form_field_jq.trigger("chosen:showing_dropdown", {
    chosen: this
  });

  if($('.modal.in').length) {
    // when in a modal get the scroll distance and apply to top of .chzn-drop
    var offset = this.container.offset();
    var scrolly = parseInt($(window).scrollTop(), 10);
    scrolly = scrolly < 0 ? 0 : scrolly;
    var toppy = offset.top+ dd_top - scrolly;
    this.dropdown.css({"top": toppy + "px","left": offset.left + "px"});
  } else {
    // proceed as normal
    this.dropdown.css({
      "top": dd_top + "px",
      "left": 0
    });
  }




  this.results_showing = true;
  this.search_field.focus();
  this.search_field.val(this.search_field.val());
  return this.winnow_results();
};


Chosen.prototype.results_hide = function() {
  if (this.results_showing) {

    this.dropdown.css({
      "display": 'none'
    });

    this.result_clear_highlight();
    this.container.removeClass("chosen-with-drop");
    this.form_field_jq.trigger("chosen:hiding_dropdown", {
      chosen: this
    });
  }
  return this.results_showing = false;
};

并且我必须为 CSS 添加一个宽度，否则它会变成网站的 100% 宽度。

.modal .chosen-container .chosen-drop {
位置：固定；
宽度：300px；
}

timothymarois picture timothymarois 于 2013-11-20

我能够解决上述代码的问题。 与版本 1 兼容。然而，我的更像是一个可以工作的装备。 但到目前为止它工作正常。 我看到的最后一个问题是调整浏览器的大小，当前的 mod 不起作用。

timothymarois picture timothymarois 于 2013-11-20

有谁知道这个问题的任何可能的修复是否会很快合并到主分支中？ 这对我来说是一个交易破坏者 =/。

DanielHoffmann picture DanielHoffmann 于 2013-12-19

我们继续使用 Select2...它也有更多功能。

2013 年 12 月 19 日星期四上午 11:24，Daniel Hoffmann Bernardes <
[email protected]> 写道：

任何人都知道是否有任何可能的解决方法来解决这个问题
很快就合并到master分支了？ 这对我来说是一个交易破坏者 =/。

—
直接回复本邮件或在Gi tHub上查看
.

PilotBob picture PilotBob 于 2013-12-19

谢谢pilotBob，是不是选择了不再维护？ 如果是这样，您可能想要更新文档。

DanielHoffmann picture DanielHoffmann 于 2013-12-19

这不是我的项目。 我“是”它的用户。 由于我们发现的几个问题
替代。

2013 年 12 月 19 日星期四上午 11:53，Daniel Hoffmann Bernardes <
[email protected]> 写道：

谢谢pilotBob，是不是选择了不再维护？ 如果是这样，你可能想要
更新文档。

—
直接回复本邮件或在Gi tHub上查看
.

PilotBob picture PilotBob 于 2013-12-19

@DanielHoffmann Chosen 仍在积极维护中。 Select2 最初是 Chosen 的一个分支，但后来变得足够远以至于它是它自己的东西。

Chosen 有意保持简单——它旨在成为select的替代品，因此它避免了许多复杂的功能和配置。 Select2 采取了相反的路线，并添加了许多功能和配置——这取决于您更看重哪种哲学。

至于这个_特定_问题，不幸的是：一个问题，而不是一个修复。 如果有人提交了一个 pull request 来修复它，它将被考虑合并。 然而，OSS 并不是任何维护者的主要工作——他们在可以完成全职工作的情况下工作。 因此，与往常一样，如果您想尝试自己修复它，请“接受拉取请求”！

tjschuck picture tjschuck 于 2013-12-19

这个问题什么时候能解决？ 它是如此古老但对许多项目至关重要！ 请尽快处理！

谢谢！

选择的分支中有很多修复，那么为什么不使用其中一个修复呢？

ghost picture ghost 于 2014-04-18

@domnulnopcea从来没有任何公关为此提交过修复程序，只有重复的报告。 如果您有解决它的想法，请发送 PR。 然后我们将对其进行审查。 目前，我不知道有任何分支可以解决这个特定问题

stof picture stof 于 2014-04-18

我对此有一个修复程序，它不是一个干净的分支，它埋在另一个存储库中，并且仅在 jQuery 版本上。 （不，我不为自己感到骄傲）

它通过将下拉元素添加到 body 元素并在页面滚动或调整大小时绝对设置其位置来工作。 它还可以确定下拉菜单是否应该在字段上方或下方以及它应该有多高（因此它不会被页面截断）。

如果这是您有兴趣合并的内容（并且确实没有其他分叉），我会尝试找一些时间将其清除并创建拉取请求。

https://gist.github.com/msaspence/11032254

msaspence picture msaspence 于 2014-04-18

@stof https://github.com/tompaton/chosen 怎么样

提交： https :

ghost picture ghost 于 2014-04-18

@domnulnopcea这从未被提交以纳入选择本身 AFAIK。 我们不能在所有分叉上检查在它上面完成的所有工作。 我们正在空闲时间研究 Chosen，因此我们无法花费数周时间检查许多存储库中的数千个提交以了解它们在做什么

stof picture stof 于 2014-04-18

@stof我们非常感谢您的工作。 我在我自己的项目 (www.ubirimi.com) 上使用它但是现在我已经给了你一个提交的链接，你能不能看看这些更改并将它们应用到官方选择的存储库中？

多谢

ghost picture ghost 于 2014-04-18

鉴于它不能直接应用（代码自 11 个月以来发生了很大变化），它需要一些时间（并且还需要对其进行测试以确保其正常工作）。 所以我现在做不到

stof picture stof 于 2014-04-18

@stof感谢您考虑这样做！ 我很感激！

ghost picture ghost 于 2014-04-18

@domnulnopcea如果它对您很重要，为什么不检查更改并自己创建拉取请求。 这毕竟是开源的美妙之处

msaspence picture msaspence 于 2014-04-18

@msaspence我愿意，但我不是前端开发人员！ 我不太习惯 JS 和所有客户端的东西

ghost picture ghost 于 2014-04-18

我们继续使用 Select2，因为它允许 AJAX 数据检索。 你们可能想看看它。

PilotBob picture PilotBob 于 2014-04-18

我认为这个阶段每个人都已经转向 Select2 - 使用 Chosen 有什么好处吗？

tetherit picture tetherit 于 2014-04-18

对我来说，PilotBob 解决方案工作得很好！

我在我的代码中添加了这个：

$(document).ready(function () {
$(".chzn-select").on(" liszt:showing_dropdown ", function () {
$(this).parents("div").css("overflow", "visible");
});
}

非常感谢你！！！

antcascam picture antcascam 于 2014-07-09

问题是选项列表的位置是absolute ，它没有扩展父容器。 我提出的一个解决方案是将其更改为float: left | right因为它可以扩展父级，如果在我添加带有clear:both的 DOM 对象之后

baquiax picture baquiax 于 2014-08-01

我在我的 css 中使用以下内容解决了这个问题（与 jquery-ui 对话框一起使用）：

#clone-budget-dialog {overflow: visible;}

grduggan picture grduggan 于 2014-09-06

@grduggan你能在图书馆的 css 中提出一个解决方案吗？
我认为您的解决方案是有效的。 发出推送请求！
+1

baquiax picture baquiax 于 2014-09-06

以前从来没有这样做过。 我得调查一下。 在css中会有很好的。

grduggan picture grduggan 于 2014-09-06

I see a similar issue when the select box is close to the end of the page. 本机选择框解决了这个问题，只是打开而不是下拉。 为什么不？

marcofognog picture marcofognog 于 2014-09-22

溢出：可见； 在容器的 div 上为我工作！ 谢谢。

clemich picture clemich 于 2014-12-01

当你使用浮动时，你并不总是需要溢出：隐藏，你也可以在你的父级中使用它清除浮动（删除溢出：隐藏）：

＆：前，
＆：后 {
内容： ” ”; // 1
显示：表； // 2
}
＆：后 {
清楚：两者；
}

这就是 clearfix 类在引导程序中的工作方式

dvera123 picture dvera123 于 2015-02-17

我修改了 css（见下文）。 似乎适用于我的场景。

.chosen-container .chosen-drop {
位置：相对； /_从绝对更改以避免容器中的溢出截止_/
顶部：100%；
左：-9999px；
z-索引：1010；
宽度：100%；
边框：1px 实心 #aaa;
边界顶部：0；
背景：#fff;
box-shadow: 0px 4px 5px rgba(0,0,0,0.15);
}

.chosen-container .chosen-results {
颜色：#444；
位置：相对；
溢出-x：隐藏；
溢出-y：自动；
边距：0 4px 4px 0；
填充：0 0 0 4px；
最大高度：200px； /_从 240px 改变_/
-webkit-overflow-scrolling：触摸；

/*Added to clearfix because we changed the chosen-drop to a relative position*/
&:before,
&:after {
    content: " "; // 1
    display: table; // 2
}
&:after {
    clear: both;
}

}

chassq picture chassq 于 2015-03-06

将 select（和 Chosen）包装在fieldset元素中也会在 webkit 浏览器中产生不需要的效果（即，在父级拥有overflow: hidden时进行切割）。
这是因为 webkit 默认将min-width: -webkit-min-content;到字段集。

这为我解决了问题：

fieldset { min-width: 0; }
sn3p picture sn3p 于 2015-04-16

@chassq嗯，你的解决方案对我不起作用，.. 看这个截图：

image

我有一个围绕所选选择的 div

  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
lpsBetty picture lpsBetty 于 2016-04-04

感谢所有已经用position: fixed给出解决方案的人

这是解决方案的 jsfiddle（覆盖选定的 CSS 类）：
http://jsfiddle.net/jwbL8utx/1/ ;)

我仍然有 1 个问题，当向下滚动（使用最大高度）时，所选对象有一个偏移量，正如您在向下滚动并打开第二个所选对象时所看到的：

http://jsfiddle.net/jwbL8utx/2/

lpsBetty picture lpsBetty 于 2016-04-04
👍2

我是这样解决的：

http://jsfiddle.net/0w4a4dq5/1/

此修复不要求您更改所选菜单本身以外的任何其他元素。 如果您“取消悬停”它，您会注意到它会再次隐藏菜单，但这符合我的要求。 如果您想始终将其保持在顶部，您可以将滚动事件绑定到您的 div 容器并触发“ selected:close.chosen ”事件。

typologist picture typologist 于 2016-06-14
👍5

@typologist感谢您提供出色的解决方案。
不过，我想提一下您的 JS 中有两个小错误：
在第 51 行，它应该是

'top': y - $(document).scrollTop()

否则弹出窗口可以在某些条件下被取代

在第 23 行，而不是使用

$('.chosen-container')

绑定事件，我认为最好使用

$chosenSelect.next('.chosen-container')

如果使用不同的 selected() 小部件多次调用该函数以进行修复，则为了避免多次绑定。

gradatz picture gradatz 于 2016-06-23
👍1

请告诉我，Chosen v1.4.2 有什么解决方案吗？

danhnguyeen picture danhnguyeen 于 2016-07-15 
.chosen-container.chosen-with-drop .chosen-drop {
    position: relative;
}
AgelxNash picture AgelxNash 于 2016-11-10
👍10 ❤2

overflow-y: visible

将此添加到包含布局的父 div。 在我的例子中，它是一个模态对话框子 div，它有 _overflow-y: auto_ 并用 _overflow-y:visible_ 替换它对我有用。

SaqibQhan picture SaqibQhan 于 2016-11-18
👍1

这个问题有解决方案吗？

rchaserr picture rchaserr 于 2017-06-22

这个项目有你的回应：
http://jsbin.com/finufihaji/edit?html

寻找一点，做测试是最基本的解决方案。

jSerenity picture jSerenity 于 2017-06-27

我必须覆盖 .chosen-drop 和 .chosen-results 并将固定高度设置为两者，以便所有选项都可以选择并且不受父 div 溢出指令的影响

至少这对我有用，我选择的大部分领域只有 3 或 4 个选项。 只有 1 个（被隐藏的那个）有大约 12 个并且可以在不久的将来增长。

CJX3M picture CJX3M 于 2017-07-07

我将以下内容应用于有溢出的父 div： hidden

.profile-content { /* Hack to stop profile-content from cropping Chosen dropdown */ padding-bottom: 100px; margin-bottom: -100px; }

来源：堆栈溢出

doowruc picture doowruc 于 2018-08-02
👍2 🚀1 ❤1

@doowruc很棒的黑客！

shlgug picture shlgug 于 2018-09-14

是否有一种方法可以将所选下拉列表附加到特定目标，以便我们可以将其附加到文档正文而不是对话框？ 选择的这种方式从对话框中流出并且不包含在其中？

mcarpenterjr picture mcarpenterjr 于 2019-05-20
👍1 
.ui-dialog-content{
    overflow:visible !important;
 }

为我工作。

GitSahib picture GitSahib 于 2019-09-04

我知道我还在为此苦苦挣扎。 这是一个 Fiddle，显示了将元素移动到正文中并可靠地设置绝对定位的选项，即使滚动也是如此。

https://jsfiddle.net/phil_ayres/gvn8bkaL/

philayres picture philayres 于 2020-02-07
👍2

https://github.com/R1p8p8e8r/chosen
我想我的解决方案会帮助你

R1p8p8e8r picture R1p8p8e8r 于 2021-07-08
此页面是否有帮助？
0 / 5 - 0 等级

相关问题

gandarez picture gandarez  ·  5评论
eduardokranz picture eduardokranz  ·  6评论
piercemcgeough picture piercemcgeough  ·  5评论
mcclurem picture mcclurem  ·  4评论
vpode picture vpode  ·  5评论