Question

我在页面左侧有一些控制过滤器。问题是这些页面中有一些有很多过滤器，这就是我的问题开始的地方。如果我在页面底部专门有一个下拉控件并单击它，它的值会移到页面底部，用户无需滚动就无法看到它们。

我正在使用所选的插件，但我不确定它是选择的问题还是css问题或只是正常的功能。

这是视觉上发生的事情：

enter image description here

然后它几乎看起来像项目的选择，因为所选择的库的输入框紧挨着我的＆＃34;项目＆＃34;过滤器，以及＆＃34;公司＆＃34;的所有值除非你向下滚动页面，否则它们是隐藏的。

示例标记，请注意大部分是由所选库自动生成的：

    <tr>
                                                            <td class="labelField">
                                                                <span id="MainContent_lblCompany0">Co. Group:</span>
                                                            </td>
                                                            <td class="valueField">
                                                                <select name="ctl00$MainContent$ddlCorpGroups" onchange="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$ddlCorpGroups\',\'\')', 0)" id="MainContent_ddlCorpGroups" title="Select Corp. Group." class="chosen-select" data-placeholder="Select Corporate Group..." style="width: 125px; display: none;">
            <option selected="selected" value=""></option>
            <option value="11">BMW</option>
            <option value="12">Caterpillar</option>
            <option value="8">Chrysler</option>
            <option value="3">Ford</option>
            <option value="35">Getrag</option>
            <option value="5">GM</option>
            <option value="17">Navistar</option>
            <option value="56">TESLA</option>
            <option value="4">ThyssenKrupp</option>
            <option value="27">ZF</option>

        </select>
<div class="chosen-container chosen-container-single" style="width: 175px;" title="Select Corp. Group." id="MainContent_ddlCorpGroups_chosen">
<a class="chosen-single chosen-default" tabindex="-1"><span>Select Corporate Group...</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off"></div><ul class="chosen-results"><li class="active-result" style="" data-option-array-index="1">BMW</li><li class="active-result" style="" data-option-array-index="2">Caterpillar</li><li class="active-result" style="" data-option-array-index="3">Chrysler</li><li class="active-result" style="" data-option-array-index="4">Ford</li><li class="active-result" style="" data-option-array-index="5">Getrag</li><li class="active-result" style="" data-option-array-index="6">GM</li><li class="active-result" style="" data-option-array-index="7">Navistar</li><li class="active-result" style="" data-option-array-index="8">TESLA</li><li class="active-result" style="" data-option-array-index="9">ThyssenKrupp</li><li class="active-result" style="" data-option-array-index="10">ZF</li></ul></div></div>
                                                            </td>
                                                        </tr>

Answer 1

这是一个CSS问题。下拉列表的祖先元素（可能是表单的容器）设置为overflow: hidden。

修复是，1。在极少数情况下，它是可行的，删除此CSS属性或2.编码一些黑客，它将下拉从DOM中的当前位置移动到{{1}的子级元素。

以下是您可能会发现有用的长时间讨论：https://github.com/harvesthq/chosen/issues/86

Answer 2

您没有提供任何代码，示例或尝试使用Chosen来解决您的问题，但是通过测试演示或查看API，我无法找到任何自定义表单元素＆＃ 39; d向顶部打开，因为本机选择会在大多数浏览器中执行，因此可能在此插件中没有计划。

关于select2（更活跃的插件等）的问题，建议使用另一个插件

overflow: hidden 。
当底部没有足够的位置时，该演示成功打开了向下的下拉列表，并且似乎也能正常使用键盘（好的标志）。从可访问性的角度来看，它们似乎都没有使用WAI-ARIA，但我没有在实际情况下测试它们，如果需要，修复可能就像绑定到自定义的一个非视口本地选择一样简单< / p>

Answer 3

我会使用$.scrollTo()功能，当下拉列表打开时，会自动滚动到其位置（加上一些额外的像素......所以看起来会更好。

除非您滚动，否则页面底部的“下拉控制”会导致值不显示

3 个答案: