Page view counter

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
    • Loading...
    • jiffy
    • Joined on 07-05-2006, 5:02 PM
    • Irving, TX
    • Posts 40
    • Points 137

    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
    • Loading...
    • Cwilk
    • Joined on 01-25-2007, 4:27 PM
    • Ireland
    • Posts 38
    • Points 42
    This is really annoying , can anything be done ?
  • Re: Bug in CollapsiblePanelExtender - Flashing in IE6

    01-31-2007, 8:17 AM
    Answer
    • Loading...
    • JoeStagner
    • Joined on 11-20-2002, 5:14 PM
    • USA
    • Posts 46
    • Points 579
    • 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
    • Loading...
    • wisecarver
    • Joined on 06-18-2002, 5:59 PM
    • Johnson City, Tennessee
    • Posts 375
    • Points 1,159

    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
    • Loading...
    • chrisjob012
    • Joined on 07-27-2007, 11:15 AM
    • Posts 39
    • Points 150

    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
    • Loading...
    • chrisjob012
    • Joined on 07-27-2007, 11:15 AM
    • Posts 39
    • Points 150

    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
    • Loading...
    • Davey.Lad
    • Joined on 02-11-2008, 10:34 AM
    • Posts 1
    • Points 2

     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
    • Loading...
    • chrisjob012
    • Joined on 07-27-2007, 11:15 AM
    • Posts 39
    • Points 150

    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
    • Loading...
    • khushi2005
    • Joined on 05-25-2007, 5:05 PM
    • Posts 145
    • Points 18

    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
    • Loading...
    • munchckin
    • Joined on 02-20-2009, 4:11 AM
    • Leeds, UK
    • Posts 8
    • Points 46
    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)