Chosen search does not work with Jquery Dialog. Why?

Question

Here is my code

  var dlg = $("#transfer_client").dialog({
                dialogClass: "templateDialog",
                autoOpen: false,
                modal: true,
                zIndex: 1500,
                height: 200,
                width: 200,
                title: "Transfer Campaign to a different Client"
            });

        dlg.parent().appendTo(jQuery("form:first"));

Where transfer_client is div code is:

 <div id="transfer_client" class="dialog position" title="Transfer to a different Client">
    <span>Client:</span>
    <asp:DropDownList runat="server" Height="30px" ID="ddlClients" DataTextField="ClientName"
        DataValueField="ClientID">
    </asp:DropDownList>
    <br />
    <br />
    <asp:Button runat="server" OnClientClick="return confirmSubmit();" ID="btnTranfer"
        Text="Transfer" OnClick="btnTranfer_Click" />
</div>

I have tried $("#dropDownID").chosen(), after dlg.parent().appendTo(jQuery("form:first")); or before but it does not make it searchable. But the code works fine when used without any dialog. Any idea how to make it work inside dialog?

Edit: Marking as solved as this was a bug in dialog js.

Answer 1

Did you have a look at issue #18 on github?

It solved my similar issue and basically comes down to increasing the search box's CSS z-index.

Answer 2

try this

.chosen-container .chosen-results {
    position: fixed;
    z-index: 23423423423;
    height: 200px;
    width: 300px;
    background-color: white;
}