This is a migrated thread and some comments may be shown as answers.

RadDropDownList drops behind modal panel

8 Answers 122 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 15 Jul 2013, 07:36 PM
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?

8 Answers, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 16 Jul 2013, 07:21 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Jon
Top achievements
Rank 1
answered on 16 Jul 2013, 07:32 AM
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.
0
Bozhidar
Telerik team
answered on 16 Jul 2013, 08:00 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Shinu
Top achievements
Rank 1
answered on 16 Jul 2013, 08:08 AM
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.
0
Jon
Top achievements
Rank 1
answered on 16 Jul 2013, 08:14 AM
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
0
Jon
Top achievements
Rank 1
answered on 16 Jul 2013, 08:21 AM
A screen shot of the tool setting.
0
Bozhidar
Telerik team
answered on 16 Jul 2013, 12:10 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Jon
Top achievements
Rank 1
answered on 16 Jul 2013, 01:00 PM
Wow, my eyes are bad.  Thanks, it looked like 10,000.  :)
Tags
DropDownList
Asked by
Jon
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Jon
Top achievements
Rank 1
Shinu
Top achievements
Rank 1
Share this question
or