RadDropDownList drops behind modal panel

[Jon]

I have a modal popup panel that includes a Rad DDL.  The control appears correctly on the form but when the control drops down, all of the items appear behind the panel.  The panel is set to a Z-Indiex of 10001 (MS standard) but even with a number higher than that, it still appears incorrectly on drop down.  Is there another setting to force it to appear in front of the panel?

[Bozhidar]

Hello Jon,

If you are using the Q2 2013 version, try setting the ZIndex property of the DropDownList to a higher value (higher than the popup window)
 
Regards,
Bozhidar
Telerik

[Jon]

As I said in my original post, the panel has a z-index of 10,001 and I've set the ddl to a higher value(15,000).  It still appears behind the panel when it drops.

[Bozhidar]

Hi Jon,

Could you provide a sample project or a live Url that we can inspect locally. Also. could you verify that you are using the latest version of the controls.
 
Regards,
Bozhidar
Telerik

[Shinu]

Hi Jon,

Please have a look at the following code I tried which works fine at my end.

ASPX:

<div>
    <asp:Button ID="Button1" runat="server" Text="Click here to show the modal" />
    <cc1:ModalPopupExtender ID="ModalPopupExtender1" BackgroundCssClass="BackGround"
        runat="server" CancelControlID="btnCancel" OkControlID="btnOkay" TargetControlID="Button1"
        PopupControlID="Panel1" Drag="true" PopupDragHandleControlID="PopupHeader">
    </cc1:ModalPopupExtender>
    <div id="Panel1" style="display: none;" class="popupConfirmation">
        <div class="popup_Container">
            <div>
                Popup Header
            </div>
        </div>
        <div class="popup_Body">
            <br />
            <telerik:RadDropDownList ID="RadDropDownList1" runat="server">
                <Items>
                    <telerik:DropDownListItem runat="server" Text="Select Item" />
                    <telerik:DropDownListItem runat="server" Text="Item 1" />
                    <telerik:DropDownListItem runat="server" Text="Item 2" />
                    <telerik:DropDownListItem runat="server" Text="Item 3" />
                    <telerik:DropDownListItem runat="server" Text="Item 4" />
                    <telerik:DropDownListItem runat="server" Text="Item 5" />
                    <telerik:DropDownListItem runat="server" Text="Item 6" />
                    <telerik:DropDownListItem runat="server" Text="Item 7" />
                </Items>
            </telerik:RadDropDownList>
        </div>
        <div class="footerclass">
            <input id="btnOkay" value="Done" type="button" />
            <input id="btnCancel" value="Cancel" type="button" />
        </div>
    </div>
</div>

CSS:

<style type="text/css">
    .BackGround
    {
        background-color: Gray;
        filter: alpha(opacity=70);
        opacity: 0.7;
        z-index: 1000 !important;
    }
    .popupConfirmation
    {
        background-color: Aqua;
        border: 2px solid red;
        width: 200px;
        height: 150px;
        padding: 10px 10px 10px 10px;
    }
    .footerclass
    {
        margin-top: 30px;
    }
</style>

Thanks,
Shinu.

[Jon]

1 - Go to http://www.reclaimedfs.com/Account/Login.aspx
2 - Login
3 - Click on "Add Description Type"
4 - Drop down the Product Type

That control has a Z-index of 15,000

[Jon]

A screen shot of the tool setting.

[Bozhidar]

Hi Jon,

Thank you for the live Url. After inspecting it I found out that the popup panel FeaturedContent_pnlNewDescription that holds the DropDownList has a zIndex of 100 001, and the DropDownList has a zIndex of only 15 000. Try setting the zIndex property to a value greater than 100 001 and it should work.
 
Regards,
Bozhidar
Telerik

[Jon]

Wow, my eyes are bad.  Thanks, it looked like 10,000.  :)