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.
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.
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 and
http://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...
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 ]
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 ]
"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 and
http://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 from
http://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:
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 at
http://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.
AirMaro
Member
1 Points
3 Posts
How do I get the CalendarExtender to show over a dropdown?
Jan 24, 2007 10:22 PM|LINK
Below is the aspx markup followed by snippet of styles. Any help would be appreciated.
<div id="date">
<div id="timeofday"><span>Date:</span>
<asp:TextBox ID="DateTextBox" runat="server" EnableViewState="False"></asp:TextBox>
<asp:Image ID="CalendarImage" ImageUrl="~/App_Themes/Default/Images/Calendar_scheduleHS.png" runat="server" />
<AjaxControlToolkit:CalendarExtender ID="CalendarButtonExtender" TargetControlID="DateTextBox" PopupButtonID="CalendarImage" CssClass="MyCalendar" runat="server" />
<asp:CompareValidator ID="CompareValidator5" runat="server" ErrorMessage="Must enter a valid date." Text="*" ControlToValidate="DateTextBox" Operator="DataTypeCheck" Type="Date"></asp:CompareValidator>
</div>
<span>Time of Day:</span>
<asp:DropDownList ID="TimeOfDayDropDownList" runat="server" DataSourceID="TimeOfDayDataSource" DataTextField="Description" DataValueField="TimeOfDayID" EnableViewState="False"></asp:DropDownList>
<asp:ObjectDataSource ID="TimeOfDayDataSource" runat="server" SelectMethod="GetTimeOfDay" TypeName="FeederDataTableAdapters.TimeOfDayTableAdapter"></asp:ObjectDataSource>
</div>
/* CSS File */
#date { position: absolute; top: 2em; left: 1.4em; }#date input { width: 7em; }
#timeofday { position: absolute; top: 4em; left: 1.4em; }
David Anson
Star
8728 Points
1847 Posts
Microsoft
Re: How do I get the CalendarExtender to show over a dropdown?
Jan 25, 2007 11:01 PM|LINK
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>http://dlaa.me/
http://blogs.msdn.com/b/delay/
This posting is provided "AS IS" with no warranties, and confers no rights.
AirMaro
Member
1 Points
3 Posts
Re: How do I get the CalendarExtender to show over a dropdown?
Jan 26, 2007 02:30 PM|LINK
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>David Anson
Star
8728 Points
1847 Posts
Microsoft
Re: How do I get the CalendarExtender to show over a dropdown?
Jan 26, 2007 09:04 PM|LINK
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 and http://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.
http://dlaa.me/
http://blogs.msdn.com/b/delay/
This posting is provided "AS IS" with no warranties, and confers no rights.
David Anson
Star
8728 Points
1847 Posts
Microsoft
Re: How do I get the CalendarExtender to show over a dropdown?
Jan 29, 2007 08:33 PM|LINK
http://dlaa.me/
http://blogs.msdn.com/b/delay/
This posting is provided "AS IS" with no warranties, and confers no rights.
rbuckton
Member
547 Points
124 Posts
Re: How do I get the CalendarExtender to show over a dropdown?
Jan 29, 2007 08:45 PM|LINK
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
Senior Consultant
Microsoft
jojokrako
Member
16 Points
5 Posts
Re: How do I get the CalendarExtender to show over a dropdown?
Feb 22, 2007 03:52 PM|LINK
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
jmaag
Member
61 Points
22 Posts
Re: How do I get the CalendarExtender to show over a dropdown?
Feb 22, 2007 04:26 PM|LINK
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?
jojokrako
Member
16 Points
5 Posts
Re: How do I get the CalendarExtender to show over a dropdown?
Feb 23, 2007 04:59 PM|LINK
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
Star
8728 Points
1847 Posts
Microsoft
Re: How do I get the CalendarExtender to show over a dropdown?
Feb 27, 2007 04:56 AM|LINK
FYI from just-updated work item 7759:
A demonstration of the problem reported by this owrk item can be found in attached file Default7.aspx (courtesy http://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 and http://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 from http://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 at http://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.
http://dlaa.me/
http://blogs.msdn.com/b/delay/
This posting is provided "AS IS" with no warranties, and confers no rights.