AJAX asp net Calendar and Modal Popup Extenders

Sean^DCT4

Hi all,

Hope someone has come across this one before...

I have an AJAX calendar extender nested within a modal popup. When the calendar extender is shown, it is behind the modal popup [see screenshot]. I have tried setting the z-index of the calendar control but it simply will not appear above the Modal popup.

I should also mention that the there is a HTML table inside the ModalPopup.
AJAX Version = 3.0.30930.28736

Suggestions are most welcome..

Seány

CSS

div.ajax__calendar_days table tr td
{
	padding-right: 0px;
}

.cal_Theme1 .ajax__calendar_container
{
	background-color: #e2e2e2;
	border: solid 1px #cccccc;
	width:186px;
	z-index:1;
}
.cal_Theme1 .ajax__calendar_header
{
	background-color: #ffffff;
	margin-bottom: 4px;
}
.cal_Theme1 .ajax__calendar_title, .cal_Theme1 .ajax__calendar_next, .cal_Theme1 .ajax__calendar_prev
{
	color: #004080;
	padding-top: 3px;
}
.cal_Theme1 .ajax__calendar_body
{
	background-color: #e9e9e9;
	border: solid 1px #cccccc;
	width:182px;
}
.cal_Theme1 .ajax__calendar_dayname
{
	text-align: center;
	font-weight: bold;
	margin-bottom: 4px;
	margin-top: 2px;
}
.cal_Theme1 .ajax__calendar_day
{
	text-align: center;
}
.cal_Theme1 .ajax__calendar_hover .ajax__calendar_day, .cal_Theme1 .ajax__calendar_hover .ajax__calendar_month, .cal_Theme1 .ajax__calendar_hover .ajax__calendar_year, .cal_Theme1 .ajax__calendar_active
{
	color: #004080;
	font-weight: bold;
	background-color: #ffffff;
}
.cal_Theme1 .ajax__calendar_today
{
	font-weight: bold;
}
.cal_Theme1 .ajax__calendar_other, .cal_Theme1 .ajax__calendar_hover .ajax__calendar_today, .cal_Theme1 .ajax__calendar_hover .ajax__calendar_title
{
	color: #bbbbbb;
}

HTML

<table>
   <tr>
      <td>End Date:</td>
      <td>
      <asp:TextBox ID="txtEndDate" runat="server"></asp:TextBox>
      <cc1:CalendarExtender ID="txtEndDate_CalendarExtender" runat="server" Enabled="True" TargetControlID="txtEndDate" CssClass="cal_Theme1">
      </cc1:CalendarExtender>
      </td> 
   </tr>
</table>

mewso

Oh dear lord asp.net ajax controls. Shudder. Anyway I think you should check the z-index and compare it to the modal z-index in css. The calendar in your css has a z-index of 1 which is almost certainly lower than the modal. Change it to 1 higher and it should work unless there is some magic MS script running that overrides the z-index when displaying the calendar.

I would also suggest you look at jquery and the jquery ui which has a nice simple calendar. At the end of the day these things are there to make it easier for the user to get some text into an input that represents a date into a textbox. No ajax required.

Evil Phil

+1.

Having worked with both the jQuery calendar is much easier.

Sean^DCT4

Unfortunately moving to JQuery is not an option at this stage. I have tried z-index of 999, 1000, 9999, 10001 on the calendar css class but it's still behind the modal popup..

mewso

Maybe this fix will work for you - http://ajaxcontroltoolkit.codeplex.com/WorkItem/View.aspx?WorkItemId=25568

Sean^DCT4

Thanks mewso. I downloaded the source for the control toolkit and changed one line in the modal popup javascript file. Rebuilt the toolkit and replaced the dll with the one I had. It worked perfectly.

I downloaded the latest stable ajax toolkit (Nov 18 2009).

I have attached it for anyone that wants to use it.

NOTE:
The z-index for the modal popup is 90