I've got some control filters on the left side of a page. Issue is some of these pages have a lot of filters and here is where my issue starts. If I have specifically a drop down control at the bottom of the page and I click on it, its values move towards the bottom of the page and the user cannot see them without having to scroll.

I am using the chosen plug in but I'm not sure it is a chosen issue or a css issue or just normal functionality.

Here's what happens visually:

Then it almost looks like the selection is for a project because the chosen library's input box is placed right next to my "Project" filter, and all the values for a "Company" are hidden unless you scroll down the page.

Sample markup, please note most of it is auto generated by the chosen library:

    <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" autoplete="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>

I've got some control filters on the left side of a page. Issue is some of these pages have a lot of filters and here is where my issue starts. If I have specifically a drop down control at the bottom of the page and I click on it, its values move towards the bottom of the page and the user cannot see them without having to scroll.

I am using the chosen plug in but I'm not sure it is a chosen issue or a css issue or just normal functionality.

Here's what happens visually:

Then it almost looks like the selection is for a project because the chosen library's input box is placed right next to my "Project" filter, and all the values for a "Company" are hidden unless you scroll down the page.

Sample markup, please note most of it is auto generated by the chosen library:

    <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" autoplete="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>

• javascript
• jquery
• css
• asp

• Is this jQuery mobile? Looks like a listview with filter set to true! – PeterKA Commented Jun 30, 2014 at 14:06
• No it's simply an asp drop down list, using the chosen library to make it look more appealing. harvesthq.github.io/chosen – JonH Commented Jun 30, 2014 at 14:52
• 2 can you show your code which you tried sofar? – G.L.P Commented Jul 3, 2014 at 5:11
• Please share some code – Yogesh Sharma Commented Jul 4, 2014 at 12:28

3 Answers 3

This is a CSS issue. An ancestor element of the dropdown (likely to be the container of your form) is set to overflow: hidden.

The fix is to, 1. in the rare case where it's feasible, remove this CSS property or 2. code some hack which moves the drop down from its current position in the DOM to bee a child of the body element.

Here's a long discussion you might find useful: https://github./harvesthq/chosen/issues/86

You didn't provide any code, example or attempt to solve your problem with Chosen but from testing the demo or looking at the API, I can't find any custom form element that'd open toward the top as a native select would do in most if not all browsers so maybe it wasn't planned in this plugin.

select2, another plugin, is remended in an issue about overflow: hidden (more active plugin, etc).
The demo successfully opens dropdown toward the top when there's no sufficient place toward bottom and seems to also work fine with keyboard (good sign). From an accessibility point of view, none of them seems to use WAI-ARIA but I didn't test them in real situation and if needed a fix could be as simple as an off-viewport native select bound to the custom one

I Would use $.scrollTo() function, and when the dropdown opens, automatically scoll to it's location (plus some extra pixels... so it would look better.