Bug in CollapsiblePanelExtender - Flashing in IE6

Last post 02-20-2009 4:16 AM by munchckin. 9 replies.

Sort Posts:

  • Bug in CollapsiblePanelExtender - Flashing in IE6

    12-06-2006, 7:09 PM
    • Member
      137 point Member
    • jiffy
    • Member since 07-05-2006, 5:02 PM
    • Irving, TX
    • Posts 40

    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>
    
     
  • Re: Bug in CollapsiblePanelExtender - Flashing in IE6

    01-26-2007, 10:03 AM
    • Member
      42 point Member
    • Cwilk
    • Member since 01-25-2007, 4:27 PM
    • Ireland
    • Posts 38
    This is really annoying , can anything be done ?
  • Re: Bug in CollapsiblePanelExtender - Flashing in IE6

    01-31-2007, 8:17 AM
    Answer
    • Member
      581 point Member
    • JoeStagner
    • Member since 11-20-2002, 10:14 PM
    • USA
    • Posts 46
    • AspNetTeam
      Moderator

    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 ]
  • Re: Bug in CollapsiblePanelExtender - Flashing in IE6

    01-31-2007, 6:07 PM
    • Participant
      1,159 point Participant
    • wisecarver
    • Member since 06-18-2002, 5:59 PM
    • Johnson City, Tennessee
    • Posts 375

    Good catch bro...Kudos Wink

    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/

  • Re: Bug in CollapsiblePanelExtender - Flashing in IE6

    01-11-2008, 1:23 AM
    • Member
      150 point Member
    • chrisjob012
    • Member since 07-27-2007, 11:15 AM
    • Posts 39

    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

     

     

  • Re: Bug in CollapsiblePanelExtender - Flashing in IE6

    01-12-2008, 2:37 AM
    • Member
      150 point Member
    • chrisjob012
    • Member since 07-27-2007, 11:15 AM
    • Posts 39

    i sorted this out... there was something wrong with my master page.... 

  • Re: Bug in CollapsiblePanelExtender - Flashing in IE6

    02-11-2008, 5:40 AM
    • Member
      2 point Member
    • Davey.Lad
    • Member since 02-11-2008, 10:34 AM
    • Posts 1

     Chris,

     any chance you could provide some detail as to what you fixed in your master page ?... I'm experiencing the same issue

     
    regards

    Dave


     

  • Re: Bug in CollapsiblePanelExtender - Flashing in IE6

    02-13-2008, 12:46 AM
    • Member
      150 point Member
    • chrisjob012
    • Member since 07-27-2007, 11:15 AM
    • Posts 39

    i don't know what exactly was the problem, but to fix that i had to re do that masterpage from scratch.

  • Re: Bug in CollapsiblePanelExtender - Flashing in IE6

    05-22-2008, 11:52 AM
    • Member
      20 point Member
    • khushi2005
    • Member since 05-25-2007, 5:05 PM
    • Posts 153

    Try setting Panel  properties

    style="overflow:hidden" Height="0"

     

    http://cyberkruz.vox.com/library/post/collapsiblepanelextender-flicker.html

  • Re: Bug in CollapsiblePanelExtender - Flashing in IE6

    02-20-2009, 4:16 AM
    • Member
      46 point Member
    • munchckin
    • Member since 02-20-2009, 4:11 AM
    • Leeds, UK
    • Posts 8
    I found that commenting out "position: absolute;" on my content panel class stopped the flashing. (my problem was in IE 7).

     

Page 1 of 1 (10 items)