Topic: Remove flicker from CollapsiblePanel Extender
Description: This topic will give you some tips on how to remove flicker associated with a collapsiblepanel if collapsed is set to True.
Notes: (None)
Situation: Sometimes when you have a collapsible panel that is set to collapsed (Collapsed = True), you will get a flicker on the page briefly showing you the panel as if it were extended, then it will set itself to the collapsed state.
Resolution: This can be caused by a few things, so below are some things you can do to eliminate the undesirable results:
1. Make sure that panel that contains the content for your collapsiblepanel has a style tag and Height property set to the following:
<asp:Panel ID="MyContentPanel" runat="server" Height="0px" style="overflow:hidden;" >
This can be an inline style tag, or can be set up in a default.css stylesheet within the App_Themes folder.
2. I'm not sure if the next tip is a must do, but I remember some unusual behavior when my CollapsiblePanelExtender was put above my content. Try formatting your code as follows:
<asp:Panel ID="TitlePanel" runat="server">
<div style="float: left; vertical-align: middle;">
<asp:Image ID="ImageToControl" runat="server" ImageUrl="Images/myImage.gif" />
</div>
<div style="float: left;">
This is my Title Text
</div>
<div style="float: right; margin-left: 20px">
<asp:Label ID="TextToControl" runat="server" />
</div>
</asp:Panel>
<asp:Panel ID="ContentPanel" runat="server" Height="0px" style="overflow: hidden;" >
My Content
</asp:Panel>
<AjaxToolkit:CollapsiblePanelExtender
ID="cpeMyExtender"
runat="server"
TargetControlID="ContentPanel"
ExpandControlID="TitlePanel"
ImageControlID="ImageToControl"
Collapsed="True"
TextLabelID="TextToControl"
SuppressPostBack="False"
CollapseControlID="TitlePanel" />
3. The following tip took me the longest to find. If you have any styles or classes in your content page that have their position tag set to relative, this will cause flicker.
.myClass
{
position: relative; remove this
color: blue;
}
or <table style="position: relative;">