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?
Any ideas?
6 Answers, 1 is accepted
0
Kevin Babcock
Top achievements
Rank 1
Rank 1
answered on 18 Aug 2008, 02:50 AM
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:
I hope this helps. Please let me know if you have any further questions.
Sincerely,
Kevin Babcock
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:
| <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> | |
| <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %> | |
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> | |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head runat="server"> | |
| <title>Untitled Page</title> | |
| <style type="text/css"> | |
| #pnlPopup { | |
| z-index: 4999 !important; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <form id="form1" runat="server"> | |
| <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> | |
| <asp:Panel ID="pnlPopup" runat="server" | |
| Height="200px" | |
| Width="300px" | |
| BackColor="LightBlue"> | |
| <telerik:RadDatePicker ID="RadDatePicker1" runat="server" /> | |
| <asp:Button ID="btnHide" runat="server" Text="Hide" /> | |
| </asp:Panel> | |
| <ajax:ModalPopupExtender ID="ModalPopupExtender1" runat="server" | |
| TargetControlID="btnShow" | |
| PopupControlID="pnlPopup" | |
| CancelControlID="btnHide"> | |
| </ajax:ModalPopupExtender> | |
| <asp:Button ID="btnShow" runat="server" Text="Show" /> | |
| </form> | |
| </body> | |
| </html> | |
I hope this helps. Please let me know if you have any further questions.
Sincerely,
Kevin Babcock
0
Jeff
Top achievements
Rank 1
Rank 1
answered on 18 Aug 2008, 09:30 PM
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.
OTOH, there are two divs, pnlPopup_backgroundElement and pnlPopup_foregroundElement, and setting the z-index of both of these to <5000 made things work.
0
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;
}
</script>
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.
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;
}
</script>
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.
0
Jeff
Top achievements
Rank 1
Rank 1
answered on 22 Aug 2008, 08:50 PM
I have a
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.
GridDateTimeColumn
in the Columns of my RadGrid MasterTableView. I setEditMode
="PopUp"
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.
0
Jeff
Top achievements
Rank 1
Rank 1
answered on 22 Aug 2008, 09:08 PM
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.
Thanks, other Jeff!
- Jeff -
div.GridEditForm_WebBlue
{
z-index: 4999 !important;
}
Thanks, other Jeff!
- Jeff -
0
Logan Marshall
Top achievements
Rank 2
Iron
Rank 2
Iron
answered on 01 May 2017, 04:49 PM
This fixed my issue thanks!