CalendarExtender: CalendarExtender appears behind server controls

when i had problems with positioning of my cal extender i just send the forms positioning to absolute and it fixed everything, maybe you can try the same

It is not the positioning of the calendar that is the problem, it's displaying it in front of other server controls

oh sorry. It turns out that is a glitch with IE6 and most people just upgrade to IE7 or firefox.

I heard if you put an iframe right were the div is it might work though.

i just set the iframe height and width to 0, but you might need to tweak that to fir your form, i just wanted to hide it

 <div> <asp:TextBox ID="text1" runat="server"></asp:TextBox> <iframe ID="iframe1" runat="server" height="0", width="0"> <cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="text1"> </cc1:CalendarExtender> </iframe> </div>

That unfortunately did not work, here is my html code:

<div>

<imgid="imgDate"src="images/calpop1.gif"style="Z-INDEX: 149; LEFT: 191px; POSITION: absolute; TOP: 66px"runat="server"alt="Click here to pick calendar date"border="0"width="16"height="13"/>

<asp:TextBoxid="txtDate"style="Z-INDEX: 105; LEFT: 96px; POSITION: absolute; TOP: 64px"runat="server"Width="78px"Font-Size="8pt"Height="15px"></asp:TextBox>

<iframeID="iframe1"runat="server"height="0",width="0">

<cc1:CalendarExtenderID="calDate"runat="server"Animated="False"FirstDayOfWeek="Sunday"

Format="yyyy/MM/dd"PopupButtonID="imgDate"TargetControlID="txtDate">

</cc1:CalendarExtender>

</iframe>

</div>

weird, except for the fact that i had to change the target control id and button id to imgDate not inDate, it worked fine for me :S

o woops, the imgDate and imgInDates are the same things, I'll reedit the post...

Is tehre anything that needs to be done to the CSS in order to implement the iframe correctly?

Is there anything that needs to be done to the CSS in order to implement the iframe correctly?

So i tried some other various techniques the dealt with the CSS. Looking at the code and image below, am I calling the css class appropiately? And what can be done to fix this problem to get the calendar to show above all other items on the ASP.net page and with the proper borders? Thank you ahead of time.

My problem is the same as this image, but it also does not appear above dropdown lists:

Here is my HTML:

<cc1:CalendarExtenderID="calInDate"runat="server"Animated="False"FirstDayOfWeek="Sunday"

Format="yyyy/MM/dd"PopupButtonID="imgInDate"TargetControlID="txtInDate"CssClass=".ajax__calendar">

</cc1:CalendarExtender>

Here is my CSS code file:

.ajax__calendar_container {padding:4px;position:absolute;cursor:default;width:170px;font-size:11px;text-align:center;font-family:tahoma,verdana,helvetica;z-index:100003;}

.ajax__calendar_body {height:139px;width:170px;position:relative;overflow:hidden;margin:auto;}

.ajax__calendar_days,.ajax__calendar_months,.ajax__calendar_years {top:0px;left:0px;height:139px;width:170px;position:absolute;text-align:center;margin:auto;}

.ajax__calendar_containerTABLE {font-size:11px;}

.ajax__calendar_header {height:20px;width:100%;}

.ajax__calendar_prev {cursor:pointer;width:15px;height:15px;float:left;background-repeat:no-repeat;background-position:50%50%;background-image:url(<%=WebResource("AjaxControlToolkit.Calendar.arrow-left.gif")%>);}

.ajax__calendar_next {cursor:pointer;width:15px;height:15px;float:right;background-repeat:no-repeat;background-position:50%50%;background-image:url(<%=WebResource("AjaxControlToolkit.Calendar.arrow-right.gif")%>);}

.ajax__calendar_title {cursor:pointer;font-weight:bold;}

.ajax__calendar_footer {height:15px;}

.ajax__calendar_today {cursor:pointer;padding-top:3px;}

.ajax__calendar_dayname {height:17px;width:17px;text-align:right;padding:02px;}

.ajax__calendar_day {height:17px;width:18px;text-align:right;padding:02px;cursor:pointer;}

.ajax__calendar_month {height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;}

.ajax__calendar_year {height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;}

.ajax__calendar.ajax__calendar_container {border:1pxsolid#646464;background-color:#ffffff;color:#000000;z-index:100003;}

.ajax__calendar.ajax__calendar_footer {border-top:1pxsolid#f5f5f5;}

.ajax__calendar.ajax__calendar_dayname {border-bottom:1pxsolid#f5f5f5;}

.ajax__calendar.ajax__calendar_day {border:1pxsolid#ffffff;}

.ajax__calendar.ajax__calendar_month {border:1pxsolid#ffffff;}

.ajax__calendar.ajax__calendar_year {border:1pxsolid#ffffff;}

.ajax__calendar.ajax__calendar_active.ajax__calendar_day {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}

.ajax__calendar.ajax__calendar_active.ajax__calendar_month {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}

.ajax__calendar.ajax__calendar_active.ajax__calendar_year {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}

.ajax__calendar.ajax__calendar_other.ajax__calendar_day {background-color:#ffffff;border-color:#ffffff;color:#646464;}

.ajax__calendar.ajax__calendar_other.ajax__calendar_year {background-color:#ffffff;border-color:#ffffff;color:#646464;}

.ajax__calendar.ajax__calendar_hover.ajax__calendar_day {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}

.ajax__calendar.ajax__calendar_hover.ajax__calendar_month {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}

.ajax__calendar.ajax__calendar_hover.ajax__calendar_year {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}

.ajax__calendar.ajax__calendar_hover.ajax__calendar_title {color:#0066cc;}

.ajax__calendar.ajax__calendar_hover.ajax__calendar_today {color:#0066cc;}

.ajax__calendar {

position:relative;

left:0px!important;

top:0px!important;

visibility:visible;display:block;

}

.ajax__calendariframe

{left:0px!important;