How to extend a Chosen drop down beyond the dialog that contains it

Question

I have a Html.DropDownList styled with Chosen in a jQuery UI dialog. The list of items is long enough that when it is opened the list is cut off by the border of the dialog window.

Is there a way to extend the dropped down portion of a Chosen drop down beyond the border of the dialog that contains it?

I want the result to be similar to this.

HTML:

<div class="ui-dialog" id="deleteControl">
    <div class="mws-form-cols clearfix">
        <label>Select a document to delete:</label>
        @Html.DropDownList("fileName", Model.fileDropdown, "", new { id = "fileDropdown", onchange = "$('#deleteDocName').val($('#fileDropdown').val())", style = "display:inline;" })
    </div>
    <!--Removed code for a button row here-->
</div>

JavaScript:

$("select").chosen();

$("#deleteControl").dialog({
    autoOpen: false,
    title: "Remove Documents",
    modal: true,
    resizable: false,
    width: "60%"
});

Rendered HTML:

<!--Removed unrelated code-->
<div tabindex="-1" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" role="dialog" aria-labelledby="ui-dialog-title-deleteControl" style="outline: 0px; left: 319px; top: 421.5px; width: 60%; height: auto; display: block; z-index: 1002;">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-deleteControl">Remove Documents</span><a class="ui-dialog-titlebar-close ui-corner-all" role="button" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
</div>
<div class="ui-dialog ui-dialog-content ui-widget-content" id="deleteControl" style="width: auto; height: auto; min-height: 100px;" scrolltop="0" scrollleft="0">
    <div class="mws-form-cols clearfix">
        <label>Select a document to delete:</label>
        <select name="fileName" id="fileDropdown" style="display: none;" onchange="$('#deleteDocName').val($('#fileDropdown').val())">
            <option value=""></option>
            <option value="Modal Test">Modal Test</option>
            <option value="Second Rename">Second Rename</option>
            <option value="Test">Test</option>
            <option value="Inner Test">Inner Test</option>
        </select>
        <div title="" class="chosen-container chosen-container-single" id="fileDropdown_chosen" style="width: 389px;"><a tabindex="-1" class="chosen-single chosen-default"><span> </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" data-option-array-index="1">Modal Test</li>
                    <li class="active-result" data-option-array-index="2">Second Rename</li>
                    <li class="active-result" data-option-array-index="3">Test</li>
                    <li class="active-result" data-option-array-index="4">Inner Test</li>
                </ul>
            </div>
        </div>
    </div>
</div></div>

Hmmm, we will need flat html I think (that would be much easier, if you just cut and paste the block from the browser. You cannot test dynamic backend content in jsfiddle unfortunately. Also chosen is a js library for styling inputs (like selects), but I am sure there must be an option to do what you want in their documentation. SO in fact the answers here wont help you as they refer to the standard browser input types. Chosen overlays those with different elements so they can be styled. — lharby, Apr 22 '15 at 15:49
If there is an option in the Chosen documentation to do what I need, I haven't been able to find it yet. I will add the flat HTML in a couple minutes. — numaroth, Apr 22 '15 at 15:55
@nummaroth I have made a jsfiddle here: http://jsfiddle.net/lharby/4e65bktm/ I have also pulled in chosen js, css, and a proto.js file from http://cdnjs.com/libraries/chosen (you can see these in the External Resources tab in jsfiddle). However I think there must be some information missing. But it is a start. You can fork this fiddle and add/edit code and reply here if we can help you with the issue. There is an error being thrown from the .dialog() function. — lharby, Apr 23 '15 at 08:24
Also, although this mentions bootstrap, the chosen elements look the same as in this question: http://stackoverflow.com/q/19089337/1238244 — lharby, Apr 23 '15 at 08:30
@lharby The problem with the fiddle is probably related to the theme (MWS Admin) that I'm using. Without it, I don't think the HTML is valid. I can't add the theme to the fiddle because it's proprietary. — numaroth, Apr 23 '15 at 13:49
I think unless you can replicate your code (even if it is only the skeleton or bare minimum) it is going to be very difficult for anyone to help you. Were you able to investigate the properties of the parent wrapper (overflow:hidden etc)? — lharby, Apr 23 '15 at 15:38
@lharby I have investigated the parent wrapper's properties. I couldn't find any properties that seemed like they would interfere, but setting `overflow:visible` directly on my dialog fixes the problem so I must be missing them. Thanks for all your help. — numaroth, Apr 23 '15 at 16:05

score 1 · Accepted Answer · answered Apr 22 '15 at 15:21

We really need to see some code.

But if you look at this fiddle http://jsfiddle.net/lharby/bvfuLp3z/ I have constrained the height of the parent wrapper and the dropdown extends below it (certainly in Chrome).

CSS:

.wrapper {
    background:powderBlue;
    height:50px;
}

HTML:

<select id="actionInput01" name="action">
                        <option value="">Go to</option>
                        <option value="ViewTransactions">View transactions</option>
                        <option value="MyPayees">Pay or view existing payees</option>
                        <option value="SetUpANewPayment">Set up a new payment</option>
..... etc

EDIT

There might be an issue with overflow hidden, potentially, but if this solution does not work I think absolute positioning may also help, but as I mentioned you need to share some code.

score 1 · Answer 2 · answered Apr 22 '15 at 15:22

yes it is possible please check the fiddle. https://jsfiddle.net/nileshmahaja/aj2ra56q/

HTML

<div class="ui-dialogue">

    <select>
        <option>Option</option>
        <option>Option</option>
        <option>Option</option>
        <option>Option</option>
        <option>Option</option>
        <option>Option</option>
        <option>Option</option>
    </select>
</div>

CSS

.ui-dialogue {
    width:400px;
    height:100px;
    background:#999;
    border:solid 1px #000;
}

In this case you need to provide fix height to the wrapper. there might be the case your wrapper div has overflow:hidden property getting applied via CSS, make sure to change it to overflow:visible.

How to extend a Chosen drop down beyond the dialog that contains it

2 Answers2