Very strange issue here. I have a page with embedded Tabcontainers and a CalendarExtender. When I click on the Textbox bound to the CalendarExtender it does not display properly. I get no forward/back arrows to scroll months, and if I click on the month name, panels start flying around as opposed to the scrolling behavior that should be experienced.
I've been gradually removing items from my page to try to isloate the problem, and have trimmed things to the attached file. From here, if I delete any one of the TabPanel items, the calendar will render properly. Put it back, and it's messed up again. Additionally, if I move the CalendarExtender above the TabPanel, it renders properly as well. This won't work for my solution, however.
Any insight on what is causing the problem?
/* test.aspx ******************************************************/
<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="info_test" Title="Untitled Page" %>
<%@dotnet.itags.org. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<%@dotnet.itags.org. Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<!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>Test</title>
</head>
<body >
<form runat="server" id="frmMP" >
<asp:ScriptManager ID="scmMain" EnablePartialRendering="true" runat="server" />
<ajax:tabcontainer runat="server" ID="tbcMain">
<ajax:TabPanel runat="server" ID="tplMain1" HeaderText="Main1" >
<ContentTemplate>
<ajax:tabcontainer ID="tplSub1" runat="server">
<ajax:TabPanel runat="server" ID="tplSub1_1" HeaderText="Sub1_1"/>
<ajax:TabPanel runat="server" ID="tplSub1_2" HeaderText="Sub1_2"/>
<ajax:TabPanel runat="server" ID="tplSub1_3" HeaderText="Sub1_3"/>
<ajax:TabPanel runat="server" ID="tplSub1_4" HeaderText="Sub1_4"/>
<ajax:TabPanel runat="server" ID="tplSub1_5" HeaderText="Sub1_5"/>
<ajax:TabPanel runat="server" ID="tplSub1_6" HeaderText="Sub1_6"/>
<ajax:TabPanel runat="server" ID="tplSub1_7" HeaderText="Sub1_7"/>
</ajax:tabcontainer >
</ContentTemplate>
</ajax:TabPanel>
<ajax:TabPanel runat="server" ID="tplMain3" HeaderText="Main3">
<ContentTemplate>
<ajax:tabcontainer ID="tplSub3" runat="server">
<ajax:TabPanel runat="server" ID="tplSub3_1" HeaderText="Sub3_1" />
<ajax:TabPanel runat="server" ID="tplSub3_2" HeaderText="Sub3_2" />
<ajax:TabPanel runat="server" ID="tplSub3_3" HeaderText="Sub3_3" />
<ajax:TabPanel runat="server" ID="tplSub3_4" HeaderText="Sub3_4" />
<ajax:TabPanel runat="server" ID="tplSub3_5" HeaderText="Sub3_5" />
<ajax:TabPanel runat="server" ID="tplSub3_6" HeaderText="Sub3_6" />
</ajax:tabcontainer >
</ContentTemplate>
</ajax:TabPanel>
<ajax:TabPanel runat="server" ID="tplMain4" HeaderText="Main4">
<ContentTemplate>
<ajax:tabcontainer ID="tplSub4" runat="server">
<ajax:TabPanel runat="server" ID="tplSub4_1" HeaderText="Sub4_1" />
<ajax:TabPanel runat="server" ID="tplSub4_2" HeaderText="Sub4_2" />
<ajax:TabPanel runat="server" ID="tplSub4_3" HeaderText="Sub4_3" />
<ajax:TabPanel runat="server" ID="tplSub4_4" HeaderText="Sub4_4" />
<ajax:TabPanel runat="server" ID="tplSub4_5" HeaderText="Sub4_5" />
<ajax:TabPanel runat="server" ID="tplSub4_6" HeaderText="Sub4_6" />
<ajax:TabPanel runat="server" ID="tplSub4_7" HeaderText="Sub4_7" />
<ajax:TabPanel runat="server" ID="tplSub4_8" HeaderText="Sub4_8" />
<ajax:TabPanel runat="server" ID="tplSub4_9" HeaderText="Sub4_9" />
<ajax:TabPanel runat="server" ID="tplSub4_10" HeaderText="Sub4_10" />
<ajax:TabPanel runat="server" ID="tplSub4_11" HeaderText="Sub4_11" />
</ajax:tabcontainer >
</ContentTemplate>
</ajax:TabPanel>
</ajax:tabcontainer>
<asp:TextBox ID="txtA" runat="server"/>
<ajax:CalendarExtender ID="ceCal" runat="server" TargetControlID="txtA" CssClass="MyCalendar"/>
</form>
</body>
</html>
Hi,
Wow... this is bizarre. Our current best guess is that it looks like IE will only load the first 32 <link> tags at the top of the page. Currently if you use the default tab style, it's adding a <link> for each tab/panel/etc. and the <link> for the Calendar's style is the 33rd (which is why moving the calendar above the tabs fixes the problem). As a quick workaround I'd recommend you not use the default style (i.e. copy the default style into your page, give it a different name, etc.) to prevent tabs from loading that many links. I'll open a work item to see what we can do from our end to not load duplicate <link>s.
Thanks,
Ted
Hi,
Here's thework item.
Also, there's an even quicker work around. Just move the CalendarExtender above the tabs. Your textbox can stay in the same place so your page looks fine, but the Calendar will be processed first.
Thanks,
Ted
Workaround works perfectly. Thanks for your assistance, Ted!
