'Calendar extender in modal popup extender ASP.NET not working
I'm using a calendar extender in a panel which popup using modalpopup extender, so panel is poped up contains the calendar extender but the calendar is behind every thing, i tried to change the z-index but all in vain, seems to me that it is a bug in the ASP.net AjaxToolKit.Any one has an idea about this problem and if it can be solved?
Edit:
<style type="text/css">
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=70);
opacity: 0.2;
}
.ob_show_panelsholder
{
border: 1px solid #736F6E;
}
.enterzipCalenderCompliant {
PADDING-RIGHT: 10px; FLOAT: left /*No display=inline*/
}
.ajax__calendar_container { z-index : 1000 ; }
</style>
<script type="text/javascript">
function calendarShown(sender, args) {
sender.style.zIndex = 10005;
}
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="_pnlShowPersonalData" runat="server">
<table class="style1">
<tr>
<td>
<asp:Image ID="_imgCurrentPP" runat="server" Height="100px" Width="100px" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label3" runat="server" Text="First name :"></asp:Label>
</td>
<td>
<asp:Label ID="_lblFirstName" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label5" runat="server" Text="Last name :"></asp:Label>
</td>
<td>
<asp:Label ID="_lblLastName" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label7" runat="server" Text="BirthDate :"></asp:Label>
</td>
<td>
<asp:Label ID="_lblBirthDate" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label10" runat="server" Text="Mobile number :"></asp:Label>
</td>
<td>
<asp:Label ID="_lblMobileNumber" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label12" runat="server" Text="Location :"></asp:Label>
</td>
<td>
<asp:Label ID="_lblLocation" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label13" runat="server" Text="Gender :"></asp:Label>
</td>
<td>
<asp:Label ID="_lblGender" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Button ID="_btnEditPersonalData" runat="server" Text="Edit Profile" />
<asp:ModalPopupExtender ID="_btnEditPersonalData_ModalPopupExtender" runat="server"
DynamicServicePath="" Enabled="True" TargetControlID="_btnEditPersonalData" BackgroundCssClass="modalBackground"
PopupControlID="_pnlEditPersonalData" CancelControlID="_btnCancel">
</asp:ModalPopupExtender>
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel ID="_pnlEditPersonalData" runat="server">
<table>
<tr>
<td>
<asp:Label ID="_FirstName" runat="server" Text="First name :" ></asp:Label>
</td>
<td>
<asp:TextBox ID="_txtFirstName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="_LastName" runat="server" Text="Last name :"></asp:Label>
</td>
<td>
<asp:TextBox ID="_txtLastName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="_BirthDate" runat="server" Text="Birth date :"></asp:Label>
</td>
<td class="ajax__calendar_container">
<asp:TextBox ID="_txtBirthDate" runat="server"></asp:TextBox>
<asp:MaskedEditExtender ID="_txtBirthDate_MaskedEditExtender" runat="server" Enabled="True"
TargetControlID="_txtBirthDate" MaskType="Date" ErrorTooltipEnabled="True" MessageValidatorTip="true"
Mask="99/99/9999">
</asp:MaskedEditExtender>
<div>
<asp:CalendarExtender ID="_txtBirthDate_CalendarExtender" runat="server" Enabled="True"
PopupButtonID="_btnCalendar" TargetControlID="_txtBirthDate">
</asp:CalendarExtender>
</div>
<asp:ImageButton ID="_btnCalendar" runat="server" ImageUrl="~/Images/calendar_button_b.jpg" />
<%-- <img alt="Icon" src="~/Images/calendar_button_b.jpg" id="Image1" />--%>
</td>
</tr>
<tr>
<td>
<asp:Label ID="_ProfilePic" runat="server" Text="Profile picture :"></asp:Label>
</td>
<td>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Label ID="Label1" runat="server"></asp:Label>
<%-- <asp:RequiredFieldValidator ID="RequiredFieldValidator8" runat="server" ControlToValidate="FileUpload1"--%><%-- ErrorMessage="*" ValidationGroup="signup"></asp:RequiredFieldValidator>--%>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ValidationExpression="^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))(.png|.jpg)$"
ControlToValidate="FileUpload1" ErrorMessage="Please Select Png or Jpg File"
ValidationGroup="UploadFile"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td>
<asp:Label ID="_MobileNumber" runat="server" Text="Mobile number :"></asp:Label>
</td>
<td>
<asp:TextBox ID="_txtMobileNumber" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="_Password" runat="server" Text="Password :"></asp:Label>
</td>
<td>
<asp:TextBox ID="_txtPassword" runat="server"></asp:TextBox>
</td>
</tr>
</table>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="_pnlLocation" runat="server">
<table width="21%">
<tr>
<td>
<asp:Label ID="_Country" runat="server" Text="Country :"></asp:Label>
</td>
<td>
<uc1:CountryListUC ID="CountryListUC1" runat="server" EnablePostBack="True" EnableValidation="False"
OnListIndexChanged="CountrySelectedIndexChanged" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="_Governet" runat="server" Text="Governet:"></asp:Label>
</td>
<td>
<uc2:GovernateListUC ID="GovernateListUC1" runat="server" OnListIndexChanged="GovernateSelectedIndexChanged"
Enabled="False" EnablePostBack="True" EnableValidation="False" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="_District" runat="server" Text="District :"></asp:Label>
</td>
<td>
<uc3:DistrictListUC ID="DistrictListUC1" runat="server" Enabled="False" EnablePostBack="True"
EnableValidation="False" />
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="CountryListUC1" EventName="ListIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<table width="22%">
<tr>
<td>
<asp:Label ID="_Gender" runat="server" Text="Gender :"></asp:Label>
</td>
<td>
<asp:DropDownList ID="_ddlGender" runat="server">
<asp:ListItem Value="1">Male</asp:ListItem>
<asp:ListItem Value="2">Female</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:Button ID="_btnSaveChanges" runat="server" OnClick="_btnSaveChages_Click" Text="Save changes"
ValidationGroup="signup" />
</td>
<td valign="bottom">
<asp:Button ID="_btnCancel" runat="server" Text="Cancel" />
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
Solution 1:[1]
is the calendar extender an ajax extender or did you mean the asp calendar control? Either way I've tried both in your same situation described and it works. Try posting some code you are using so we can see where the issue lies and be of further assistance.
Edit: here's the code I used from yours. I took out the usercontrols so I could debug the page and it seemed to work. Here's an a screenshot
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="web.test" %>
<!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></title>
<style type="text/css">
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=70);
opacity: 0.2;
}
.ob_show_panelsholder
{
border: 1px solid #736F6E;
}
.enterzipCalenderCompliant {
PADDING-RIGHT: 10px; FLOAT: left /*No display=inline*/
}
.ajax__calendar_container { z-index : 1000 ; }
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="smtest" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="_pnlShowPersonalData" runat="server">
<table class="style1">
<tr>
<td>
<asp:Image ID="_imgCurrentPP" runat="server" Height="100px" Width="100px" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label3" runat="server" Text="First name :"></asp:Label>
</td>
<td>
<asp:Label ID="_lblFirstName" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label5" runat="server" Text="Last name :"></asp:Label>
</td>
<td>
<asp:Label ID="_lblLastName" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label7" runat="server" Text="BirthDate :"></asp:Label>
</td>
<td>
<asp:Label ID="_lblBirthDate" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label10" runat="server" Text="Mobile number :"></asp:Label>
</td>
<td>
<asp:Label ID="_lblMobileNumber" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label12" runat="server" Text="Location :"></asp:Label>
</td>
<td>
<asp:Label ID="_lblLocation" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label13" runat="server" Text="Gender :"></asp:Label>
</td>
<td>
<asp:Label ID="_lblGender" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Button ID="_btnEditPersonalData" runat="server" Text="Edit Profile" />
<ajaxToolkit:ModalPopupExtender ID="_btnEditPersonalData_ModalPopupExtender" runat="server" TargetControlID="_btnEditPersonalData" BackgroundCssClass="modalBackground" PopupControlID="_pnlEditPersonalData" CancelControlID="_btnCancel" />
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel ID="_pnlEditPersonalData" runat="server">
<table>
<tr>
<td>
<asp:Label ID="_FirstName" runat="server" Text="First name :" ></asp:Label>
</td>
<td>
<asp:TextBox ID="_txtFirstName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="_LastName" runat="server" Text="Last name :"></asp:Label>
</td>
<td>
<asp:TextBox ID="_txtLastName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="_BirthDate" runat="server" Text="Birth date :"></asp:Label>
</td>
<td class="ajax__calendar_container">
<asp:TextBox ID="_txtBirthDate" runat="server"></asp:TextBox>
<ajaxtoolkit:MaskedEditExtender ID="_txtBirthDate_MaskedEditExtender" runat="server" Enabled="True"
TargetControlID="_txtBirthDate" MaskType="Date" ErrorTooltipEnabled="True" MessageValidatorTip="true"
Mask="99/99/9999">
</ajaxtoolkit:MaskedEditExtender>
<div>
<ajaxtoolkit:CalendarExtender ID="_txtBirthDate_CalendarExtender" runat="server" Enabled="True"
PopupButtonID="_btnCalendar" TargetControlID="_txtBirthDate">
</ajaxtoolkit:CalendarExtender>
</div>
<asp:ImageButton ID="_btnCalendar" runat="server" ImageUrl="~/Images/calendar_button_b.jpg" />
<%-- <img alt="Icon" src="~/Images/calendar_button_b.jpg" id="Image1" />--%>
</td>
</tr>
<tr>
<td>
<asp:Label ID="_ProfilePic" runat="server" Text="Profile picture :"></asp:Label>
</td>
<td>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Label ID="Label1" runat="server"></asp:Label>
<%-- <asp:RequiredFieldValidator ID="RequiredFieldValidator8" runat="server" ControlToValidate="FileUpload1"--%><%-- ErrorMessage="*" ValidationGroup="signup"></asp:RequiredFieldValidator>--%>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ValidationExpression="^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))(.png|.jpg)$"
ControlToValidate="FileUpload1" ErrorMessage="Please Select Png or Jpg File"
ValidationGroup="UploadFile"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td>
<asp:Label ID="_MobileNumber" runat="server" Text="Mobile number :"></asp:Label>
</td>
<td>
<asp:TextBox ID="_txtMobileNumber" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="_Password" runat="server" Text="Password :"></asp:Label>
</td>
<td>
<asp:TextBox ID="_txtPassword" runat="server"></asp:TextBox>
</td>
</tr>
</table>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="_pnlLocation" runat="server">
<table width="21%">
<tr>
<td>
<asp:Label ID="_Country" runat="server" Text="Country :"></asp:Label>
</td>
<td>
</td>
</tr>
<tr>
<td>
<asp:Label ID="_Governet" runat="server" Text="Governet:"></asp:Label>
</td>
<td>
</td>
</tr>
<tr>
<td>
<asp:Label ID="_District" runat="server" Text="District :"></asp:Label>
</td>
<td>
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
<Triggers>
</Triggers>
</asp:UpdatePanel>
<table width="22%">
<tr>
<td>
<asp:Label ID="_Gender" runat="server" Text="Gender :"></asp:Label>
</td>
<td>
<asp:DropDownList ID="_ddlGender" runat="server">
<asp:ListItem Value="1">Male</asp:ListItem>
<asp:ListItem Value="2">Female</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:Button ID="_btnSaveChanges" runat="server" Text="Save changes"
ValidationGroup="signup" />
</td>
<td valign="bottom">
<asp:Button ID="_btnCancel" runat="server" Text="Cancel" />
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Solution 2:[2]
CSS solution that worked for me:
.ajax__calendar_container
{
position :absolute;
z-index : 100003 !important;
}
Make sure to use !important declaration. Without it z-index was always overwrited by higher settings. You should also check z-index in css for popup dialog and it's background.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | McGarnagle |