Bug in CollapsiblePanelExtender - Flashing in IE6 : The Official Microsoft ASP.NET Forums

Reply

jiffy

Member

137 Points

Bug in CollapsiblePanelExtender - Flashing in IE6

Dec 06, 2006 11:09 PM|LINK

This has been an error I had hoped was fixed in the latest release, but it still remains. It only happens in IE6, which I now see that MSDN has IE6 VPCs, so I am hoping the toolkit team can reproduce this bug. I have attached the code below. Please note there is no codebehind. The bug is the "flashing" or repainting that IE6 does when the page loads. Simply put this in an ASPX page and run in IE6. You can refresh the page again to see it happen. All of the drop downs will repaint and the headers will adjust slightly. It does not do this in IE7.

Work item: http://www.codeplex.com/AtlasControlToolkit/WorkItem/View.aspx?WorkItemId=6312 (I meant to create it as high, but missed it on save).

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!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>Untitled Page</title>
    <style>
    



div.collapsePanelHeader{
	color: Black;


	background: #eeeeee;
	background-repeat:repeat-x;
	font-weight:bold;
}
div.collapsePanel
{
	overflow:hidden;
}
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <ajax:ScriptManager ID="scriptmanager" runat="server" />
        <!-- panels -->
        <asp:Panel ID="CommonFieldsHeader" runat="server" CssClass="collapsePanelHeader" Height="20px">
            <div style="padding: 5px; cursor: pointer; vertical-align: middle;">
                <div style="float: left;">
                    Initial Report</div>
                <div style="float: left; margin-left: 20px;">
                    <asp:Label ID="CommonFieldsLabel" runat="server">(Hide Details...)</asp:Label></div>
            </div>
        </asp:Panel>
        <asp:Panel ID="CommonFieldsPanel" runat="server" CssClass="collapsePanel">
            <table border="0">
                <tr>
                    <td>label</td>
                    <td><asp:DropDownList ID="test1" runat="server" /></td>
                </tr>
                <tr>
                    <td>label</td>
                    <td><asp:DropDownList ID="DropDownList1" runat="server" /></td>
                </tr>
                <tr>
                    <td>label</td>
                    <td><asp:DropDownList ID="DropDownList2" runat="server" /></td>
                </tr>
                <tr>
                    <td>label</td>
                    <td><asp:DropDownList ID="DropDownList3" runat="server" /></td>
                </tr>
                <tr>
                    <td>label</td>
                    <td><asp:DropDownList ID="DropDownList4" runat="server" /></td>
                </tr>
                

            </table>
        </asp:Panel>
        <asp:Panel ID="FormSpecificHeader" runat="server" CssClass="collapsePanelHeader" Height="20px">
            <div style="padding: 5px; cursor: pointer; vertical-align: middle;">
                <div style="float: left;">
                    Incident Details</div>
                <div style="float: left; margin-left: 20px;">
                    <asp:Label ID="FormSpecificLabel" runat="server">(Hide Details...)</asp:Label></div>
            </div>


        </asp:Panel>
        <asp:Panel ID="FormSpecificPanel" runat="server" CssClass="collapsePanel">
            <table border="0">
                <tr>
                    <td>label</td>
                    <td><asp:DropDownList ID="DropDownList5" runat="server" /></td>
                </tr>
                <tr>
                    <td>label</td>
                    <td><asp:DropDownList ID="DropDownList6" runat="server" /></td>
                </tr>
                <tr>
                    <td>label</td>
                    <td><asp:DropDownList ID="DropDownList7" runat="server" /></td>
                </tr>
                <tr>
                    <td>label</td>
                    <td><asp:DropDownList ID="DropDownList8" runat="server" /></td>
                </tr>
                <tr>
                    <td>label</td>
                    <td><asp:DropDownList ID="DropDownList9" runat="server" /></td>
                </tr>
                

            </table>
        </asp:Panel>
        <asp:Panel ID="SummaryHeader" runat="server" CssClass="collapsePanelHeader" Height="20px">
            <div style="padding: 5px; cursor: pointer; vertical-align: middle;">
                <div style="float: left;">
                    Summary</div>
                <div style="float: left; margin-left: 20px;">
                    <asp:Label ID="SummaryLabel" runat="server">(Show Details...)</asp:Label></div>
            </div>


        </asp:Panel>
        <asp:Panel ID="SummaryPanel" runat="server" CssClass="collapsePanel" Height="0">
            <table border="0">
                <tr>
                    <td>label</td>
                    <td><asp:DropDownList ID="DropDownList10" runat="server" /></td>
                </tr>
                <tr>
                    <td>label</td>
                    <td><asp:DropDownList ID="DropDownList11" runat="server" /></td>
                </tr>
                <tr>
                    <td>label</td>
                    <td><asp:DropDownList ID="DropDownList12" runat="server" /></td>
                </tr>
                <tr>
                    <td>label</td>
                    <td><asp:DropDownList ID="DropDownList13" runat="server" /></td>
                </tr>
                <tr>
                    <td>label</td>
                    <td><asp:DropDownList ID="DropDownList14" runat="server" /></td>
                </tr>
                

            </table>
        </asp:Panel>
        <asp:Panel ID="CommentsHeader" runat="server" CssClass="collapsePanelHeader" Height="20px">
            <div style="padding: 5px; cursor: pointer; vertical-align: middle;">
                <div style="float: left;">
                    Comments</div>
                <div style="float: left; margin-left: 20px;">
                    <asp:Label ID="CommentsLabel" runat="server">(Show Details...)</asp:Label></div>
            </div>


        </asp:Panel>
        <asp:Panel ID="CommentsPanel" runat="server" CssClass="collapsePanel" Height="0">
            <table border="0">
                <tr>
                    <td>label</td>
                    <td><asp:DropDownList ID="DropDownList15" runat="server" /></td>
                </tr>
                <tr>
                    <td>label</td>
                    <td><asp:DropDownList ID="DropDownList16" runat="server" /></td>
                </tr>
                <tr>
                    <td>label</td>
                    <td><asp:DropDownList ID="DropDownList17" runat="server" /></td>
                </tr>
                <tr>
                    <td>label</td>
                    <td><asp:DropDownList ID="DropDownList18" runat="server" /></td>
                </tr>
                <tr>
                    <td>label</td>
                    <td><asp:DropDownList ID="DropDownList19" runat="server" /></td>
                </tr>
                

            </table>
        </asp:Panel>
        <asp:Panel ID="HistoryHeader" runat="server" CssClass="collapsePanelHeader" Height="20px">
            <div style="padding: 5px; cursor: pointer; vertical-align: middle;">
                <div style="float: left;">
                    Edit History</div>
                <div style="float: left; margin-left: 20px;">
                    <asp:Label ID="HistoryLabel" runat="server">(Show Details...)</asp:Label></div>
            </div>


        </asp:Panel>
        <asp:Panel ID="HistoryPanel" runat="server" CssClass="collapsePanel" Height="0">
            <table border="0">
                <tr>
                    <td>label</td>
                    <td><asp:DropDownList ID="DropDownList20" runat="server" /></td>
                </tr>
                <tr>
                    <td>label</td>
                    <td><asp:DropDownList ID="DropDownList21" runat="server" /></td>
                </tr>
                <tr>
                    <td>label</td>
                    <td><asp:DropDownList ID="DropDownList22" runat="server" /></td>
                </tr>
                <tr>
                    <td>label</td>
                    <td><asp:DropDownList ID="DropDownList23" runat="server" /></td>
                </tr>
                <tr>
                    <td>label</td>
                    <td><asp:DropDownList ID="DropDownList24" runat="server" /></td>
                </tr>
                

            </table>
        </asp:Panel>
        <!-- end panels -->
        <ajaxToolkit:CollapsiblePanelExtender ID="CommonExt" runat="server" TargetControlID="CommonFieldsPanel" ExpandControlID="CommonFieldsHeader" CollapseControlID="CommonFieldsHeader" Collapsed="False" TextLabelID="CommonFieldsLabel" ExpandedText="(Hide Details...)" CollapsedText="(Show Details...)" ImageControlID="CommonFieldsImage" SuppressPostBack="true" />
        <ajaxToolkit:CollapsiblePanelExtender ID="FormExt" runat="server" TargetControlID="FormSpecificPanel" ExpandControlID="FormSpecificHeader" CollapseControlID="FormSpecificHeader" Collapsed="False" TextLabelID="FormSpecificLabel" ExpandedText="(Hide Details...)" CollapsedText="(Show Details...)" ImageControlID="FormSpecificImage" SuppressPostBack="true" />
        <ajaxToolkit:CollapsiblePanelExtender ID="SummaryExt" runat="server" TargetControlID="SummaryPanel" ExpandControlID="SummaryHeader" CollapseControlID="SummaryHeader" Collapsed="True" TextLabelID="SummaryLabel" ExpandedText="(Hide Details...)" CollapsedText="(Show Details...)" ImageControlID="SummaryImage" SuppressPostBack="true" />
        <ajaxToolkit:CollapsiblePanelExtender ID="HistoryExt" runat="server" TargetControlID="HistoryPanel" ExpandControlID="HistoryHeader" CollapseControlID="HistoryHeader" Collapsed="True" TextLabelID="HistoryLabel" ExpandedText="(Hide Details...)" CollapsedText="(Show Details...)" ImageControlID="HistoryImage" SuppressPostBack="true" />
        <ajaxToolkit:CollapsiblePanelExtender ID="CommentsExt" runat="server" TargetControlID="CommentsPanel" ExpandControlID="CommentsHeader" CollapseControlID="CommentsHeader" Collapsed="True" TextLabelID="CommentsLabel" ExpandedText="(Hide Details...)" CollapsedText="(Show Details...)" ImageControlID="CommentsImage" SuppressPostBack="true" />
    </form>
</body>
</html>

Reply

Cwilk

Member

42 Points

38 Posts

Re: Bug in CollapsiblePanelExtender - Flashing in IE6

Jan 26, 2007 02:03 PM|LINK

This is really annoying , can anything be done ?

Reply

JoeStagner

Member

584 Points

47 Posts

Re: Bug in CollapsiblePanelExtender - Flashing in IE6

Jan 31, 2007 12:17 PM|LINK

Try setting the height of the content panel to be collapsed to zero.

[ I am NOT able to respond to PMs - please contact me via www.MisfitGeek.com ]

Marked as answer by David Anson on Feb 13, 2007 08:32 PM

Reply

wisecarver

Participant

1169 Points

375 Posts

Re: Bug in CollapsiblePanelExtender - Flashing in IE6

Jan 31, 2007 10:07 PM|LINK

Good catch bro...Kudos [;)]

BTW, not at all related but...Dig in and take a look at what Laura just dropped on10:

http://on10.net/Blogs/laura/star-wars-and-nikko/

Reply

chrisjob012

Member

202 Points

45 Posts

Re: Bug in CollapsiblePanelExtender - Flashing in IE6

Jan 11, 2008 05:23 AM|LINK

JoeStagner

Try setting the height of the content panel to be collapsed to zero.

I am getting this issue. I am getting this both in IE6 and IE7, but its not coming in Firefox. I am using MasterPage.

I first copied the same example from AjaxControlToolkit Project, addded it on to a page without masterpage , set height =0 for the content panel and it works fine. But when i copied the same and addded into the content of my master page, it doesnt flash but, when it is opened that amount of space is added below