if you put a collapsible panel in a tabPanel of a tabcontainer (but its not the visible tab) then no matter what the collapsedSize is set to it adds display: none to the div causing it to not render at all.
you can ignore the jquery Css, its just used for styling.
when you run the page below you will see two panels collapsed on the first tab. On the second tab only the expanded panel will render, the other will accidentally get "display: none" added to the style from the _getTargetSize() returning zero, even though it has collapsedSize set to 24.
This occurs in both IE9 and Current Chrome.
this is using the November release downloaded via Nuget (and verified with a private build of the source from codeplex)
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" 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 runat="server">
<title></title>
<link type="text/css" href="/App_Themes/redmond/jquery-ui-1.8.12.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="/Scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui-1.8.16.custom.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:TabContainer runat="server">
<asp:TabPanel ID="TabOne" runat="server" HeaderText="one">
<HeaderTemplate>First Tab</HeaderTemplate>
<ContentTemplate>
<asp:Panel ID="Top" runat="server" CssClass="ui-widget">
<div class="ui-widget-header" style="height:25px;" id="TopHeader">
<div style="padding:2px; cursor: pointer; vertical-align: middle;">
<div style="float:left;" >Top first Tab</div>
<div style="float:right; vertical-align: middle;"><asp:Image ID="TopExpand" ImageUrl="/Images/collapse_blue.jpg" runat="server" />
</div>
</div>
</div>
this is just the top collapsible panel contents
</asp:Panel>
<asp:Panel ID="Middle" runat="server" CssClass="ui-widget">
<div class="ui-widget-header" style="height:25px;" id="MiddleHeader">
<div style="padding:2px; cursor: pointer; vertical-align: middle;">
<div style="float:left;" >Middle first Tab</div>
<div style="float:right; vertical-align: middle;"><asp:Image ID="MiddleExpand" ImageUrl="/Images/collapse_blue.jpg" runat="server" />
</div>
</div>
</div>
this is just the middle collapsible panel
</asp:Panel>
<asp:CollapsiblePanelExtender ID="TopPanelCollapser" runat="server"
AutoCollapse="false" AutoExpand="false" TargetControlID="Top"
CollapsedSize="24" EnableViewState="true" Collapsed="true"
CollapseControlID="TopHeader" ExpandControlID="TopHeader"
CollapsedImage="~/Images/expand_blue.jpg" ImageControlID="TopExpand"
ExpandedImage="~/Images/collapse_blue.jpg">
</asp:CollapsiblePanelExtender>
<asp:CollapsiblePanelExtender ID="MiddlePanelExpander" runat="server"
AutoCollapse="false" AutoExpand="false" TargetControlID="Middle"
CollapsedSize="24" EnableViewState="true" Collapsed="true"
CollapseControlID="MiddleHeader" ExpandControlID="MiddleHeader"
CollapsedImage="~/Images/expand_blue.jpg" ImageControlID="MiddleExpand"
ExpandedImage="~/Images/collapse_blue.jpg">
</asp:CollapsiblePanelExtender>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="TabTwo" runat="server" HeaderText="one" >
<HeaderTemplate>Second Tab</HeaderTemplate>
<ContentTemplate>
<asp:Panel ID="Top2" runat="server" CssClass="ui-widget">
<div class="ui-widget-header" style="height:25px;" id="Top2Header">
<div style="padding:2px; cursor: pointer; vertical-align: middle;">
<div style="float:left;" >Top Second Tab</div>
<div style="float:right; vertical-align: middle;"><asp:Image ID="Top2Expand" ImageUrl="/Images/collapse_blue.jpg" runat="server" />
</div>
</div>
</div>
this is just the top collapsible panel contents
</asp:Panel>
<asp:Panel ID="Middle2" runat="server" CssClass="ui-widget">
<div class="ui-widget-header" style="height:25px; display:inherit;" id="Middle2Header">
<div style="padding:2px; cursor: pointer; vertical-align: middle;">
<div style="float:left;" >Middle Second Tab</div>
<div style="float:right; vertical-align: middle;"><asp:Image ID="Middle2Expand" ImageUrl="/Images/collapse_blue.jpg" runat="server" />
</div>
</div>
</div>
this is just the middle collapsible panel
</asp:Panel>
<DNA
<asp:CollapsiblePanelExtender ID="Top2PanelExpander" runat="server"
AutoCollapse="false" AutoExpand="false" TargetControlID="Top2"
CollapsedSize="24" Collapsed="false" ViewStateMode="Enabled"
CollapseControlID="Top2Header" ExpandControlID="Top2Header"
CollapsedImage="~/Images/expand_blue.jpg" ImageControlID="Top2Expand"
ExpandedImage="~/Images/collapse_blue.jpg">
</asp:CollapsiblePanelExtender>
<asp:CollapsiblePanelExtender ID="Middle2PanelExpander" runat="server"
AutoCollapse="false" AutoExpand="false" TargetControlID="Middle2"
CollapsedSize="24" Collapsed="true"
CollapseControlID="Middle2Header" ExpandControlID="Middle2Header"
CollapsedImage="~/Images/expand_blue.jpg" ImageControlID="Middle2Expand"
ExpandedImage="~/Images/collapse_blue.jpg">
</asp:CollapsiblePanelExtender>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
</form>
</body>
</html>
you can ignore the jquery Css, its just used for styling.
when you run the page below you will see two panels collapsed on the first tab. On the second tab only the expanded panel will render, the other will accidentally get "display: none" added to the style from the _getTargetSize() returning zero, even though it has collapsedSize set to 24.
This occurs in both IE9 and Current Chrome.
this is using the November release downloaded via Nuget (and verified with a private build of the source from codeplex)
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" 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 runat="server">
<title></title>
<link type="text/css" href="/App_Themes/redmond/jquery-ui-1.8.12.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="/Scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui-1.8.16.custom.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:TabContainer runat="server">
<asp:TabPanel ID="TabOne" runat="server" HeaderText="one">
<HeaderTemplate>First Tab</HeaderTemplate>
<ContentTemplate>
<asp:Panel ID="Top" runat="server" CssClass="ui-widget">
<div class="ui-widget-header" style="height:25px;" id="TopHeader">
<div style="padding:2px; cursor: pointer; vertical-align: middle;">
<div style="float:left;" >Top first Tab</div>
<div style="float:right; vertical-align: middle;"><asp:Image ID="TopExpand" ImageUrl="/Images/collapse_blue.jpg" runat="server" />
</div>
</div>
</div>
this is just the top collapsible panel contents
</asp:Panel>
<asp:Panel ID="Middle" runat="server" CssClass="ui-widget">
<div class="ui-widget-header" style="height:25px;" id="MiddleHeader">
<div style="padding:2px; cursor: pointer; vertical-align: middle;">
<div style="float:left;" >Middle first Tab</div>
<div style="float:right; vertical-align: middle;"><asp:Image ID="MiddleExpand" ImageUrl="/Images/collapse_blue.jpg" runat="server" />
</div>
</div>
</div>
this is just the middle collapsible panel
</asp:Panel>
<asp:CollapsiblePanelExtender ID="TopPanelCollapser" runat="server"
AutoCollapse="false" AutoExpand="false" TargetControlID="Top"
CollapsedSize="24" EnableViewState="true" Collapsed="true"
CollapseControlID="TopHeader" ExpandControlID="TopHeader"
CollapsedImage="~/Images/expand_blue.jpg" ImageControlID="TopExpand"
ExpandedImage="~/Images/collapse_blue.jpg">
</asp:CollapsiblePanelExtender>
<asp:CollapsiblePanelExtender ID="MiddlePanelExpander" runat="server"
AutoCollapse="false" AutoExpand="false" TargetControlID="Middle"
CollapsedSize="24" EnableViewState="true" Collapsed="true"
CollapseControlID="MiddleHeader" ExpandControlID="MiddleHeader"
CollapsedImage="~/Images/expand_blue.jpg" ImageControlID="MiddleExpand"
ExpandedImage="~/Images/collapse_blue.jpg">
</asp:CollapsiblePanelExtender>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="TabTwo" runat="server" HeaderText="one" >
<HeaderTemplate>Second Tab</HeaderTemplate>
<ContentTemplate>
<asp:Panel ID="Top2" runat="server" CssClass="ui-widget">
<div class="ui-widget-header" style="height:25px;" id="Top2Header">
<div style="padding:2px; cursor: pointer; vertical-align: middle;">
<div style="float:left;" >Top Second Tab</div>
<div style="float:right; vertical-align: middle;"><asp:Image ID="Top2Expand" ImageUrl="/Images/collapse_blue.jpg" runat="server" />
</div>
</div>
</div>
this is just the top collapsible panel contents
</asp:Panel>
<asp:Panel ID="Middle2" runat="server" CssClass="ui-widget">
<div class="ui-widget-header" style="height:25px; display:inherit;" id="Middle2Header">
<div style="padding:2px; cursor: pointer; vertical-align: middle;">
<div style="float:left;" >Middle Second Tab</div>
<div style="float:right; vertical-align: middle;"><asp:Image ID="Middle2Expand" ImageUrl="/Images/collapse_blue.jpg" runat="server" />
</div>
</div>
</div>
this is just the middle collapsible panel
</asp:Panel>
<DNA
<asp:CollapsiblePanelExtender ID="Top2PanelExpander" runat="server"
AutoCollapse="false" AutoExpand="false" TargetControlID="Top2"
CollapsedSize="24" Collapsed="false" ViewStateMode="Enabled"
CollapseControlID="Top2Header" ExpandControlID="Top2Header"
CollapsedImage="~/Images/expand_blue.jpg" ImageControlID="Top2Expand"
ExpandedImage="~/Images/collapse_blue.jpg">
</asp:CollapsiblePanelExtender>
<asp:CollapsiblePanelExtender ID="Middle2PanelExpander" runat="server"
AutoCollapse="false" AutoExpand="false" TargetControlID="Middle2"
CollapsedSize="24" Collapsed="true"
CollapseControlID="Middle2Header" ExpandControlID="Middle2Header"
CollapsedImage="~/Images/expand_blue.jpg" ImageControlID="Middle2Expand"
ExpandedImage="~/Images/collapse_blue.jpg">
</asp:CollapsiblePanelExtender>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
</form>
</body>
</html>