DatePicker ignores z-index?

7 posts, 0 answers
  1. Jeff
    Jeff avatar
    100 posts
    Member since:
    Apr 2008

    Posted 15 Aug 2008 Link to this post

    I am opening a DatePicker from a asp:panel controlled by a modal popup extender.  The datepicker is displaying behind the modal popup.  I've added a CSS hack to kick up the z-index of the datepicker, and according to the dom inspector I'm using, the z-index of the datepicker is changing.  But no matter how high I set that z-index, the datepicker continues to draw behind the modal popup.

    Any ideas?

  2. Kevin Babcock
    Kevin Babcock avatar
    189 posts
    Member since:
    Mar 2007

    Posted 17 Aug 2008 Link to this post

    Hello Jeff,

    It's not that the RadDatePicker's popup calendar is ignoring the z-index, it's that its z-index is set to 5000 in a wrapping <div> element. Also, the ModalPopupExtender of the AJAX Control Toolkit sets the z-index of the PopupControl to 10000. These are both arbitrary values, chosen by their developers to try and ensure that the control sits on top of everything else. Since the ModalPopupExtender developer chose a higher z-index, the RadDatePicker's popup calendar gets set in the background.

    There are several ways you can get around this. You could set a CSS property to override the other properties, or you could use JavaScript to manually modify the z-index of the elements. I chose to go the CSS route.

    There are two important steps you need to take to use CSS to allow you to show the popup calendar of the RadDatePicker control. First, you should override the z-index of the PopupControl (your Panel) because the containing <div> element of the RadDatePicker's popup calendar does not have an id or class, making it difficult to set it's style properties. As I mentioned before, this control is given a z-index of 10000 by the ModalPopupExtender. Since the RadDatePicker gives its popup calendar a z-index of 5000, we want to set the Panel's z-index to something lower. In this case, I chose 4999. Second, in order to override the z-index property you should use the CSS !important rule. Here is an example:

    1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
    3 <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %> 
    5 <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    7 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> 
    9 <html xmlns=""
    10 <head runat="server"
    11     <title>Untitled Page</title> 
    12     <style type="text/css">      
    13         #pnlPopup { 
    14             z-index: 4999 !important; 
    15         } 
    16     </style> 
    17 </head> 
    18 <body> 
    19     <form id="form1" runat="server"
    20         <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> 
    22         <asp:Panel ID="pnlPopup" runat="server" 
    23             Height="200px"  
    24             Width="300px" 
    25             BackColor="LightBlue"
    26             <telerik:RadDatePicker ID="RadDatePicker1" runat="server" />     
    27             <asp:Button ID="btnHide" runat="server" Text="Hide" />       
    28         </asp:Panel> 
    30         <ajax:ModalPopupExtender ID="ModalPopupExtender1" runat="server" 
    31             TargetControlID="btnShow" 
    32             PopupControlID="pnlPopup" 
    33             CancelControlID="btnHide"
    34         </ajax:ModalPopupExtender> 
    36         <asp:Button ID="btnShow" runat="server" Text="Show" />   
    37     </form> 
    38 </body> 
    39 </html> 

    I hope this helps. Please let me know if you have any further questions.

    Kevin Babcock
  3. Jeff
    Jeff avatar
    100 posts
    Member since:
    Apr 2008

    Posted 18 Aug 2008 Link to this post

    Setting the z-index of pnlPopup had no effect.  According to the DOM inspector, there isn't any element with ID=pnlPopup.

    OTOH, there are two divs, pnlPopup_backgroundElement and pnlPopup_foregroundElement, and setting the z-index of both of these to <5000 made things work.
  4. Maria Ilieva
    Maria Ilieva avatar
    4017 posts

    Posted 19 Aug 2008 Link to this post

    Hello Jeff,

    You cloud set the z-index in pageLoad using the following script:

    <script type="text/javascript">
    function pageLoad()
        Telerik.Web.UI.Calendar.Popup.zIndex = 10000000;

    I hope this helps.

    All the best,
    Maria Ilieva
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  5. Jeff
    Jeff avatar
    2 posts
    Member since:
    Aug 2008

    Posted 22 Aug 2008 Link to this post

    I have a


    in the Columns of my RadGrid MasterTableView.  I set



    and the RadGrid Skin="WebBlue".  I haven't done anything else very creative; (I'm trying to show someone how productive I can be with these, and I'm not being very productive.)

    The popup edit form has a z-index of 8000, while the calendar has a z-index of 5000.

    I need to know how to get to the instance of the Calendar or Popup.  The previous post seems to be trying to set a shared member of a class, but that's not going to work.

    Thanks in advance for your help.
  6. Jeff
    Jeff avatar
    2 posts
    Member since:
    Aug 2008

    Posted 22 Aug 2008 Link to this post

    OK, Thanks to the other Jeff, I attacked the edit form rather than the nameless/classless div with its inline style that surrounds the calendar.



    z-index: 4999 !important;


    Thanks, other Jeff!

    - Jeff -
  7. Logan
    Logan avatar
    28 posts
    Member since:
    Jan 2012

    Posted 01 May in reply to Maria Ilieva Link to this post

    This fixed my issue thanks!
Back to Top