Page and Control Flashing Using AJAX Control Toolkit Controls
I'm using IE7 and the ASP.NET AJAX Control Toolkit. I'm using two controls -- Accordion and CollapsiblePanelExtender. I'm actually using 2 CollapsiblePanelExtenders, and the Accordion control is inside one of the panels for the CollapsiblePanelExtender (see the code below).The problem I'm seeing is that when I click an Accordion pane to open/close it or click the CollapsiblePanelExtender panel to open/close the panels, the controls and page flash while the animation is in progess. Everything else appears to be working except for this flashing.
Would anyone know why this is happening and how to fix it? My code is below. Thanks in advance.
CSS
.collapsiblePanelLeft
{
height: 420px;
overflow: hidden;
width: 250px;
}.collapsiblePanelSpacer
{
background-color: #EEEEEE;
cursor: pointer;
height: 420px;
width: 15px;
}.collapsiblePanelRight
{
height: 420px;
overflow: hidden;
width: 735px;
}.accordionHeader
{
background-color: #0000B8;
border: 1px solid Black;
color: White;
cursor: pointer;
font-family: 'Trebuchet MS', Tahoma, Verdana, Arial, 'MS Sans Serif';
font-weight: bold;
padding: 0px;
}.accordionContent
{
background-color: #EEEEEE;
border: 1px dashed Black;
border-top: none;
padding: 0px;
padding-top: 0px;
}.accordionLink
{
background-color: Transparent;
color: White;
}
Site.master
<table border="0" cellpadding="2" cellspacing="0" style="width: 1000px">
<tr>
<td align="left" valign="top" style="width: 100%">
<asp:Panel ID="PanelHeader" runat="server" CssClass="panels">
<uc1:Header ID="Header" runat="server" />
</asp:Panel>
</td>
</tr>
<tr>
<td align="left" valign="top" style="width: 100%">
<asp:Panel ID="PanelMain" runat="server" CssClass="panels">
<cc1:CollapsiblePanelExtender
ID="CollapsiblePanelExtender1"
runat="server"
TargetControlID="PanelRight"
ExpandControlID="PanelSpacer"
CollapseControlID="PanelSpacer"
Collapsed="false"
ImageControlID="ImageSpacer"
CollapsedImage="Images/expand.jpg"
ExpandedImage="Images/collapse.jpg"
CollapsedSize="973"
ExpandedSize="723"
SuppressPostBack="true"
ExpandDirection="Horizontal">
</cc1:CollapsiblePanelExtender>
<cc1:CollapsiblePanelExtender
ID="CollapsiblePanelExtender2"
runat="server"
TargetControlID="PanelLeft"
ExpandControlID="PanelSpacer"
CollapseControlID="PanelSpacer"
Collapsed="false"
ImageControlID="ImageSpacer"
CollapsedImage="Images/expand.jpg"
ExpandedImage="Images/collapse.jpg"
CollapsedSize="0"
ExpandedSize="250"
SuppressPostBack="true"
ExpandDirection="Horizontal">
</cc1:CollapsiblePanelExtender>
<table border="0" cellpadding="2" cellspacing="0" style="width: 1000px">
<tr>
<td align="left" valign="top" style="height: 420px; width: 250px">
<asp:Panel ID="PanelLeft" runat="server" CssClass="collapsiblePanelLeft">
<cc1:Accordion
ID="AccordionMenu"
runat="server"
AutoSize="Limit"
ContentCssClass="accordionContent"
FadeTransitions="true"
Height="420px"
HeaderCssClass="accordionHeader"
SelectedIndex="0"
SuppressHeaderPostbacks="true">
<Panes>
<cc1:AccordionPane ID="AccordionPaneHome" runat="server">
<Header>
<a href="" class="accordionLink" onclick="return false;">Home</a>
</Header>
<Content>
[content here]
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="AccordionPaneFileImport" runat="server">
<Header>
<a href="" class="accordionLink" onclick="return false;">File Import</a>
</Header>
<Content>
[content here]
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="AccordionPaneEvaluate" runat="server">
<Header>
<a href="" class="accordionLink" onclick="return false;">Evaluate</a>
</Header>
<Content>
[content here]
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="AccordionPaneSubmit" runat="server">
<Header>
<a href="" class="accordionLink" onclick="return false;">Submit</a>
</Header>
<Content>
[content here]
</Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
</asp:Panel>
</td>
<td align="left" valign="top" style="height: 420px; width: 15px">
<asp:Panel ID="PanelSpacer" runat="server" CssClass="collapsiblePanelSpacer">
<asp:Image ID="ImageSpacer" runat="server" ImageUrl="~/Images/expand.jpg" />
</asp:Panel>
</td>
<td align="left" valign="top" style="height: 420px; width: 735px">
<asp:Panel ID="PanelRight" runat="server" CssClass="collapsiblePanelRight">
<asp:ContentPlaceHolder ID="ContentPlaceHolderMain" Runat="server">
No default content specified.
</asp:ContentPlaceHolder>
</asp:Panel>
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
<tr>
<td align="left" valign="top" style="width: 100%">
<asp:Panel ID="PanelFooter" runat="server" CssClass="panels">
<uc2:Footer ID="Footer" runat="server" />
</asp:Panel>
</td>
</tr>
</table>
.aspx
<asp:Content ID="ContentMainDefault" ContentPlaceHolderID="ContentPlaceHolderMain" Runat="Server">
<table border="0" cellpadding="2" cellspacing="0" style="width: 100%">
<tr>
<td align="left" valign="top" style="width: 100%; border-right: blue 1px dashed; border-top: blue 1px dashed; border-left: blue 1px dashed; border-bottom: blue 1px dashed;">
Main
</td>
</tr>
</table>
</asp:Content>
![]() |
0 |
![]() |