RadDropDownList drops behind modal panel

9 posts, 0 answers
  1. Jon
    Jon avatar
    17 posts
    Member since:
    Jun 2013

    Posted 15 Jul 2013 Link to this post

    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?
  2. Bozhidar
    Admin
    Bozhidar avatar
    1103 posts

    Posted 16 Jul 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jon
    Jon avatar
    17 posts
    Member since:
    Jun 2013

    Posted 16 Jul 2013 Link to this post

    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.
  5. Bozhidar
    Admin
    Bozhidar avatar
    1103 posts

    Posted 16 Jul 2013 Link to this post

    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.
  6. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 16 Jul 2013 Link to this post

    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.
  7. Jon
    Jon avatar
    17 posts
    Member since:
    Jun 2013

    Posted 16 Jul 2013 Link to this post

    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
  8. Jon
    Jon avatar
    17 posts
    Member since:
    Jun 2013

    Posted 16 Jul 2013 Link to this post

    A screen shot of the tool setting.
  9. Bozhidar
    Admin
    Bozhidar avatar
    1103 posts

    Posted 16 Jul 2013 Link to this post

    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.
  10. Jon
    Jon avatar
    17 posts
    Member since:
    Jun 2013

    Posted 16 Jul 2013 Link to this post

    Wow, my eyes are bad.  Thanks, it looked like 10,000.  :)
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017