Problems with dropdown and jquery-ui dialog box

Question

I have a page with dropdown list and Dialog component from the jQuery UI library.

But the issue is dropdown list appears over dialog box in IE7 .In chrome,Mozilla Firefox it works fine.

Here is the code for jquery:-

var divdialog = $('#divdialog'); divdialog.dialog('destroy');
    divdialog.dialog({
        autoOpen: true,
        height: 310,
        width: 570,title: "Look Up",
        modal: true,
        open: function () {$('#testframe').attr("src", strValue);
        $('#testframe').height($(this).height()-5); $('#testframe').width($(this).width()-10);         
            },
        close: function (e) {
            $('#divdialog').remove();
            //divdialog.html('');
           // divdialog.dialog('destroy');
            },
        resizable: true,
        resize: function() { $('#divdialog iframe').hide(); },
        resizeStop: function() { $('#divdialog iframe').show(); 
        $('#divdialog iframe').height($(this).height()-10);  
        $('#divdialog iframe').width($(this).width()-10); } ,
        closeOnEscape:true,
        draggable:true
    })

Here is the code for UI:-

        <div id="divdialog" style="display:none;">
             <iframe id="testframe" frameborder="0" title="dialogBox"><p>not supportted iframe</p></iframe>
    </div>

<asp:DropDownList  ID="ddlRoleNames" runat="server" Width="180px" 
                                    OnSelectedIndexChanged="ddlRoleNames_SelectedIndexChanged" AutoPostBack="true">
                                </asp:DropDownList>

Any ideas on this issue?

Answer 1

That might be because of the Z-index, why because even if your element is having the z-index as 1000, there will be a chance of having that element below the element with z-index as 1, if the both are not in the same stacking contexts.

So try giving the position as absolute in dropdown and let me know .

have a look at the below question also which may help

IE7 Z-Index Layering Issues

Hope this helps