I am using the calendarExtender on a web form and when the calendar pops out it is underneath my drop down box. I tried changing the z-index but it doesnt help. Can anyone help me get around this issue.
Example:
<%
@dotnet.itags.org.PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default" %><%
@dotnet.itags.org.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1" %><!
DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><
htmlxmlns="http://www.w3.org/1999/xhtml"><
headrunat="server"><title>Untitled Page</title><linkhref="StyleSheet.css"rel="stylesheet"type="text/css"/></
head><
body><formid="form1"runat="server"><asp:ScriptManagerID="ScriptManager1"runat="server"/>
<asp:UpdatePanelID="UpdatePanel1"runat="server"><ContentTemplate><div><b>Calendar with an associated button:</b><br/><asp:TextBoxrunat="server"ID="Date5"/><asp:Imagerunat="Server"ID="Image1"ImageUrl="Calendar_scheduleHS.png"/><br/><cc1:CalendarExtenderID="calendarButtonExtender"runat="server"TargetControlID="Date5"PopupButtonID="Image1"CssClass="MyCalendar"/>
<br/><asp:DropDownListID="DropDownList1"runat="server"><asp:ListItem>TEST TEST TEST TEST</asp:ListItem></asp:DropDownList></div></ContentTemplate></asp:UpdatePanel>
</form>
</
body></
html>Thx
Hi claranced,I just tried this code and it works fine for me. The calendar appears above the dropdown. I'd make sure there's nothing funny going on in your stylesheet.
Thanks,
Ted
I haven't tried your example but I take it your using IE6? This is a bug in IE where by drop down boxes are effectively on a high layer than the web page regardless of z-index (it delegates the drawing of a drop down to Windows). The only work-around I've found is to use an iframe shim behind the element you want to show. A google search for 'iframe shim' will turn turn up plenty of examples.
I am getting the same issue. Did you manage to find a solution? I suspect that my stylesheet may be to blame, as I have done a number of simplified tests and not encountered the same issue.
If you have found a solution, I would be interested to hear what it was.
Regards,
Will Houston
We have a work-around for the IE6 IFRAME thing that should be avoiding a problem here. Ted tried with IE6, so I don't think that's the issue. Could someone please post a simple demonstration of this problem along with the steps necessary to see it? Until we have that, it's hard to say what might be going on.
I havent found a solution. Im using IE6 with SP2. I tried the IFrame workaround but didnt have any luck. I have had multiple people on our team try this with the same result. Here is the simplest example. When I click on the hyperlink the calendar control pops up under the dropdownlist. If anyone has had any luck with the IFrame, I would love to see an example.
<%@. Page Language="VB" AutoEventWireup="false" CodeFile="CalendarTest.aspx.vb" Inherits="CalendarTest" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><!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>Untitled Page</title> <style type="text/css"> .PopCal { z-index: 100; } </style></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:HyperLink ID="HyperLink1" runat="server">Click Here</asp:HyperLink> <cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1" PopupButtonID="HyperLink1" CssClass="PopCal"> </cc1:CalendarExtender> <br /> <asp:DropDownList ID="DropDownList1" runat="server"> <asp:ListItem>Item One</asp:ListItem> <asp:ListItem>Item Two</asp:ListItem> </asp:DropDownList> </ContentTemplate> </asp:UpdatePanel> </div> </form></body></html> The above example works for me in IE6 (using the web developer plugin I checked the IFRAME is there), but I have a more complex situation where it doesn't work (the calendar extender is several UpdatePanels deep and inside an animation popup where I've implemented my own IFRAME workaround - the calendar IFRAME is definately there though, just not working as expected).
I checked the IFrame in my browser as well and it is present, but still not pushing the calendar in front of the dropdownlist.
I also just ran across it, and at the worst time: as I was showing my boss the latest bits of the site i am working on..... I've been in IE7 here on my workstation and he is still on IE6.....
I look forward to an updated toolkit where this is addressed :-)
This thread describes the issue (CSS, not Calendar) and suggests a workaround:http://forums.asp.net/thread/1550925.aspx
David...
Trust me that with this post I mean absolutely no disrepect... i know there's tons and tons of hours into the toolkit so far and it really is an amazing set of controls that could give Yahoo's a run for their money...
But with that said, how can a bug/error-in-code like this get through QA? Is there no one testing it on IE6 just because IE7 became a "critical update" so the teams at MS think the whole world is off of IE6 and it's CSS issues? It's very frustrating to experience these as a developer expecially when there is absolutely no mention of "known issues"where they should be
I've been knee deep, and will continue to trudge through, in all this MS Ajax since the June CTP and up until this point I've just chalked these up "oh well, it's beta (or not even!)", but now that the core is RTM level (andyet still with glaring issues like this), we as developers need more stability and less instances of running over issues like this where it appears that not even one QA person thought about checking this stuff across more than FireFox and IE7
Another example of this is thePre-Compilation error of RC1 (i really fail to see how that got through testing as well), i know that's not your area per se, but we're all expecting more from the whole MS Ajax framework
It's hard for me to post something like this because being a programmer of VB and SQL Server and now MS Ajax has been my life both professionally and personally for the past 8 years, but things are getting worse rather than better it seems... i could point out all sorts of problems that just simply shouldn't be there that stop manay developers dead in their tracks...
I know this isn't probably fair to post this in response to your David, as i know you are just on the Toolkit team and i also know from attending your DevConnection's sessions that you are very excited and dedicated to this Toolkit project, but it's issues like this z-index issue that are just super frustrating to run into
MorningZ,
We make every effort to comprehensively test on IE6 as well as on IE7, Firefox, Sarfari, and now Opera. As I currently understand it, the particular issue under discussion here is no more or less a problem on IE6 than on any other browser. It stems from the CSS rules for z-index, specifically as they relate to specially position-ed elements on a page (see the links from my discussion in the related thread (http://forums.asp.net/thread/1550925.aspx)). As such, a web page must be laid out in a fairly specific manner in order to trigger this problem - and that's not one of the types of layouts we'd tried before the 10123 release. Is that unfortunate? Yes. Is it something we could possibly have tried and discovered? Sure. However, we'll never be able to cover every scenario that every user might possibly come up with no matter how much we try. As it happens in this case, the contributor of the Calendar has replied to that thread with a suggestion that can be applied by users to their web page to customize the styling of the Calendar control and address the issue for their specific scenario. If it works well, we'll add mention of it to the Calendar sample page as you suggest. That's not quite as good as avoiding the problem in the first place, but I hope it's close.
You mention a couple of other issues with ASP.NET AJAX itself - I'm not going to address them here since I'm not on that team and don't have the right context to do so. But one of the things my team is doing with the Toolkit project is releasing updates more often so that we can quickly address issues that come up. Our development practices are a little more relaxed than typical Microsoft teams - but we're also quite a bit more agile because of it. In this case, we're planning an update for this Thursday (about 9 days after our last release) to address some of the more annoying issues that have come up on the Forums. The issue you raised was already on the list for this release. :)
We're listening to your feedback and trying to do what we can to address the issues you raise. Thanks for taking the time to bring this to our attention and share your thoughts here!
David Anson:
As I currently understand it, the particular issue under discussion here is no more or less a problem on IE6 than on any other browser.
I'm not meaning to nitpick or start an argument here but I have to disagree with you on this one (and I think this was part of the point MorningZ was trying to get accross). The issue under discussion here (of the calendar appearing under a drop down box) is ONLY an IE6 issue, it does not occur on any other browser and is initially caused by an IE6 bug, and further by IE6s incorrect CSS handling (not CSS itself).
a web page must be laid out in a fairly specific manner in order to trigger this problem
I'll have to agree with you again here - the page has to be laid out in a fairly specific manner not to trigger this problem. The problem appears to be when the calendar extender is placed inside an absolute or fixed positioned element. For some reason doing this breaks the iframe fix.
As an aside (but still related) doing so also causes the overflow property of the container element to function as 'hidden' in both IE6 and IE7.
Thanks for the great work David. I hope to see a fix soon.
I have put up some detailed documentation on how to skin Calendar and Tabs athttp://community.bennettadelson.com/blogs/rbuckton/archive/2007/02/02/Skinning-model-for-Calendar-and-Tabs-in-Ajax-Control-Toolkit.aspx.
No comments:
Post a Comment