Welcome to EMC Consulting Blogs

I was on the asp.net forums and I came across someone with the following issue:

Guys, i have created a collapsible panel control using the ajax extender.  The only issue i have is that is does not "scroll" down.  All the examples i have seen expand the window in a fluid movement.  Mine does not.  Mine almost looks like I am turning the div visible.  very strange...thoughts? 

<asp:UpdatePanel runat="server" ID="pnlMain">
                <ContentTemplate>
                    <cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" TargetControlID="pnlLeadDetails"
                    CollapsedSize="0" ExpandedSize="500" Collapsed="true" ExpandControlID="linkbutton1" CollapseControlID="linkbutton1"
                    AutoCollapse="false" AutoExpand="false" ScrollContents="true" ExpandDirection="Vertical"/>
                    <asp:LinkButton runat="server" ID="linkbutton1" Text="LeadDetails"  />
                    <asp:Panel runat="server" ID="pnlLeadDetails" BackColor="black">
                        hello world<br>
	        hello world<br>
	        hello world<br>
               	        hello world<br>
	        hello world<br>
                    </asp:Panel>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="linkbutton1" EventName="Click" />
                </Triggers>
            </asp:UpdatePanel>

I had a look at this and it turned out the issue was the location of the Update Panel.The problem was that the update panel wrapping the CPE which in essence swallowed the expanding/contract animation.

 To get around this the markup needed re-arraging as below:

<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" TargetControlID="pnlLeadDetails" CollapsedSize="0" ExpandedSize="500" Collapsed="true" ExpandControlID="linkbutton1" CollapseControlID="linkbutton1" AutoCollapse="false" AutoExpand="false" ScrollContents="true" ExpandDirection="Vertical"/>

<asp:LinkButton runat="server" ID="linkbutton1" Text="LeadDetails" /> <asp:Panel runat="server" ID="pnlLeadDetails" BackColor="black">
    <asp:UpdatePanel runat="server" ID="pnlMain">
        <ContentTemplate>
            hello world<br> hello world<br> hello world<br> hello world<br> hello world<br>
        </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="linkbutton1" EventName="Click" />

            </Triggers>
</asp:UpdatePanel>

</asp:Panel>

You then have the CPE correctly expanding and the content can then be used with an UpdatePanel.