I've read some of the posts that cover this topic and solve it with IFRAME but that involves mouseover or click events of a div. The CalendarExtender provides a convenient PopupButtonID attribute to display the calendar by clicking an image. How do I get the calendar to show over the dropdown below it when I click the calendar image next to textbox?
Below is the aspx markup followed by snippet of styles. Any help would be appreciated.
<divid="date">
<span>Date:</span>
<asp:TextBoxID="DateTextBox"runat="server"EnableViewState="False"></asp:TextBox>
<asp:ImageID="CalendarImage"ImageUrl="~/App_Themes/Default/Images/Calendar_scheduleHS.png"runat="server"/>
<AjaxControlToolkit:CalendarExtenderID="CalendarButtonExtender"TargetControlID="DateTextBox"PopupButtonID="CalendarImage"CssClass="MyCalendar"runat="server"/>
<asp:CompareValidatorID="CompareValidator5"runat="server"ErrorMessage="Must enter a valid date."Text="*"ControlToValidate="DateTextBox"Operator="DataTypeCheck"Type="Date"></asp:CompareValidator>
</div>
<divid="timeofday">
<span>Time of Day:</span>
<asp:DropDownListID="TimeOfDayDropDownList"runat="server"DataSourceID="TimeOfDayDataSource"DataTextField="Description"DataValueField="TimeOfDayID"EnableViewState="False"></asp:DropDownList>
<asp:ObjectDataSourceID="TimeOfDayDataSource"runat="server"SelectMethod="GetTimeOfDay"TypeName="FeederDataTableAdapters.TimeOfDayTableAdapter"></asp:ObjectDataSource>
</div>
/* CSS File */
#date{position:absolute;top:2em;left:1.4em; }
#dateinput{width:7em; }
#timeofday{position:absolute;top:4em;left:1.4em; }
The following page works fine for me in IE7 and IE6. What about you? If it breaks, what browser are you using?
<%@. Page Language="C#" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %><!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>Sample Page</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:TextBox ID="TB" runat="server" /> <ajaxToolkit:CalendarExtender ID="C" runat="server" TargetControlID="TB" /> <br /> <asp:DropDownList runat="server"> <asp:ListItem Text="Item" /> </asp:DropDownList> </form></body></html>
The code you wrote works great except that I needed to register the System.Web.Extensions. When I wrapped the textbox and dropdown in divs the calendar appears behind the dropdown. Applying css and adjusting the z-index fixed the issue. I tried adjusting the z-index before posting but I must have had an old css file stuck in my browser cache. Below is the working code. Remove the z-index from both sytles to see the calendar go behind the dropdown.
Thanks.
<%@. Page Language="C#" %><%@. Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %><!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 id="Head1" runat="server"> <title>Sample Page</title> <style> #div1 { position: absolute; top: 6em; left: 3em; z-index: 101; } #div2 { position: absolute; top: 8em; left: 4em; z-index: 100; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div id="div1"> <asp:TextBox ID="TB" runat="server" /> <ajaxToolkit:CalendarExtender ID="C" runat="server" TargetControlID="TB" /> <br /> </div> <div id="div2"> <asp:DropDownList ID="DropDownList1" runat="server"> <asp:ListItem Text="Item" /> </asp:DropDownList> </div> </form></body></html>Thank you for the demonstration!
As it happens, once you start modifying the position style of things (done here with position:absolute), you take them out of the usual z-index process and bump them way up. So in this case, as soon as you absolutely position div2, you raise it above the Calendar and start hitting problems. Read more here if you're interested:http://www.w3.org/TR/CSS21/visuren.html#q29 andhttp://www.w3.org/TR/CSS21/zindex.html.
So because Calendar seems to work correctly under the normal HTML/CSS behavior as you confirmed above, I'm inclined to say that this is not a bug with Calendar, but rather a consequence of how CSS rules are applied.
Seeing as how this issue has come up for some other folks as well, I'm wondering if we should do something like add a ZIndex property to CalendarExtender so that people get better control of where their Calendar sits in the CSS z-index stack...
If it is merely a z-index issue you can try the following:
<style type="text/css">.ajax__calendar_container { z-index : 1000 ; }</style>We are still working on the documentation for the CSS rules that can be used to redefine Calendar and Tabs. They use nested CSS class selectors to scope their layout. The calendar's "container" div tag is the highest styleable element, so you can update the default CSS class by adding a.ajax__calendar_container rule to either the head tag or to a linked stylesheet.
[ FYI: the CSS class name specifically is: ajax(underscore)(underscore)calendar(underscore)container ]
Ron
In my browser (version 6.0.2900.2180.xpsp_sp2_gdr.050301-1519) none of the examples work properly.
I thought there was a movement afoot to use an iframe or something.
Byron
rbuckton:
If it is merely a z-index issue you can try the following:
<style type="text/css">
.ajax__calendar_container { z-index : 1000 ; }
</style>
We are still working on the documentation for the CSS rules that can be used to redefine Calendar and Tabs. They use nested CSS class selectors to scope their layout. The calendar's "container" div tag is the highest styleable element, so you can update the default CSS class by adding a.ajax__calendar_container rule to either the head tag or to a linked stylesheet.
[ FYI: the CSS class name specifically is: ajax(underscore)(underscore)calendar(underscore)container ]
Ron
I am having a similar issue with the ValidatorCalloutExtender. I posted about it here:http://forums.asp.net/thread/1589043.aspx
If you can adjust the style of the calendar container as demonstrated above, can you do the same to the ValidatorCalloutExtender?
Funny - i tried putting that exact same page in my site and it doesn't display in IE6 properly...not sure why.
Byron
David Anson:
The following page works fine for me in IE7 and IE6. What about you? If it breaks, what browser are you using?
<%@. Page Language="C#" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %><!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>Sample Page</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:TextBox ID="TB" runat="server" /> <ajaxToolkit:CalendarExtender ID="C" runat="server" TargetControlID="TB" /> <br /> <asp:DropDownList runat="server"> <asp:ListItem Text="Item" /> </asp:DropDownList> </form></body></html>
FYI from just-updatedwork item 7759:
A demonstration of the problem reported by this owrk item can be found in attached file Default7.aspx (courtesyhttp://forums.asp.net/thread/1550925.aspx).
My initial investigation led me to write:
"As it happens, once you start modifying the position style of things (done here with position:absolute), you take them out of the usual z-index process and bump them way up. So in this case, as soon as you absolutely position div2, you raise it above the Calendar and start hitting problems. Read more here if you're interested:http://www.w3.org/TR/CSS21/visuren.html#q29 andhttp://www.w3.org/TR/CSS21/zindex.html.
So because Calendar seems to work correctly under the normal HTML/CSS behavior as you confirmed above, I'm inclined to say that this is not a bug with Calendar, but rather a consequence of how CSS rules are applied."
The Calendar author's suggestion for how to work around this on affected sites (also fromhttp://forums.asp.net/thread/1550925.aspx) is to add the following to the page in order to give a z-index style to the Calendar and break out of the CSS situation I describe above:
<style type="text/css">
.ajax__calendar_container { z-index : 1000 ; }
</style>
This suggestion is valid CSS and works in most browsers. Unfortunately, it does not work in IE6/7 - an explanation of the reason why can be found athttp://www.aplus.co.yu/lab/z-pos/. Basically, IE6/7 get the CSS rules wrong here and so the only apparant workaround for IE6/7 seems to be to add a z-index style to the Calendar's parent element instead. This is not something Calendar can safely do in general, so it's left to the page author to do so as necessary. The attached file contains both workarounds (commented-out) for demonstration purposes. We will add a "known issue" to the sample page.
OK!!! This may have been corrected for comboboxes in the March '07 release, but is still occurring when the CalendarExtender is enclosed within another "bordered" control; ie: a grid whose size is delimited by a panel control. Maybe it's me, but it seems to me that a Calendar control such as this shouldALWAYS have the top most x-index. Btw, using IE7, applying the z-index within .ajax__calendar_container has no effect whatsoever!!! In order to make this control useful, MS really needs to think about adding some additional properties like being able to set the z order or visibility persistence, so at least user can scroll through the grid to make the calendar visible.
Last released didn't fix it for me. I still have the same problems displaying the calendar in a panel enclosed FormView. I don't get why the workitem is removed everytime stating it's fixed, cause it's not. There's a lot of documentation around about this problem: IE6 always renders select boxes on top of allmost all of the other components. The only way to fix this is rendering an iframe above the selectbox (one of the few controls which are rendered above a selectbox) and rendering the calendar above that (since it has no problem rendering above an iframe). This is done with the z-index property.
For more info: http://support.microsoft.com/kb/177378. Note that only the select box is listed as a windowed element. Thats exactly why this behaviour only occurs in IE6 and not in FF (not sure about IE7); FF's render engine doesn't render select elements above the rest of the page.
After installing the latest release I also noticed that I wasstill seeing calendars being displayed underneath select boxes. After looking into this issue I noticed that the iframe wasn't beingpositioned correctly when the calendar was inside a container thathad been positioned relative or absolute.
I added the following to my main stylesheet to position the iframecorrectly for the above situation.
.ajax__calendar { position: relative;}.ajax__calendar iframe { left:0px !important; top:0px !important;}Note: I have not tested this under anyother conditions.
Hopefully this helps.
That didn't do it. For some reason the iframe is rendered
afterthe select boxes and therefore doesn't work properly. I've been trying some css properties on the calendar and iframe class, but I can't get the iframe to display properly where I want it to.
Fixed it! The IFRAME is rendered as a new element in the parent node of the textbox; therefore it is placed after all the other elements, rendering in the wrong spot. This is easily fixed by surrounding the input and calendarextender with a DIV. Now the position is still wrong and the frame isn't begin displayed correctly. Adding the following code to your stylesheet should fix that:
.ajax__calendar {
position: relative;
left: 0px !important;
top: 0px !important;
visibility: visible; display: block;
}
.ajax__calendar iframe
{
left: 0px !important;
top: 0px !important;
}
For me this works fine in both IE and FF, but I can imagine it depends on the structure of your site. But with all the tips above I think the problem can be solved in 9/10 times.
SplashMan: