Accordion control flickering on IE6

Home ›

ASP.NET Forums » ASP.NET AJAX » ASP.NET AJAX Control Toolkit » Accordion control flickering on IE6

Previous Next

Accordion control flickering on IE6

Last post 05-10-2008 12:03 AM by msaboor. 6 replies.

Sort Posts:

Accordion control flickering on IE6

06-18-2007, 3:15 AM

Contact

Loading...
AjaxDeveloper
Joined on 06-01-2007, 4:38 AM
Posts 11

I am using accordion control in side a tabpanel. Within the accordionpane i have a html table with some images and text. The panes flicker a lot whenever i click on them

Is this a known issue with IE 6??

please advise.

Thanks.

Re: Accordion control flickering on IE6

06-22-2007, 12:01 AM

Contact

Answer

Loading...
Raymond Wen - MSFT
Joined on 12-22-2006, 3:29 AM
China
Posts 3,764

Hi,

Haven't seen such issue before, and I tried with the following code and it's fine.

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0">
            <ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">
                <ContentTemplate>
                     
                 <ajaxToolkit:Accordion ID="MyAccordion" runat="server"
            AutoSize="None" ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40"
            HeaderCssClass="accordionHeader" RequireOpenedPane="false" SelectedIndex="0"
            SuppressHeaderPostbacks="true" TransitionDuration="250">
            <Panes>
                <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
                    <Header>
                        <a href="">1. Accordion</a></Header>
                    <Content>
                        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1"
                            ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
                        <asp:Button ID="Button1" runat="server" Text="Button" />
                        The Accordion is a web control that allows you to provide multiple panes and display
                        them one at a time. It is like having several where only one can be expanded at
                        a time. The Accordion is implemented as a web control that contains AccordionPane
                        web controls. Each AccordionPane control has a template for its Header and its Content.
                        We keep track of the selected pane so it stays visible across postbacks.
                    </Content>
                </ajaxToolkit:AccordionPane>
                <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
                    <Header>
                        <a href="">2. AutoSize</a></Header>
                    <Content>
                        <p>
                            It also supports three AutoSize modes so it can fit in a variety of layouts.</p>
                        <ul>
                            <li><b>None</b> - The Accordion grows/shrinks without restriction. This can cause other
                                elements on your page to move up and down with it.</li>
                            <li><b>Limit</b> - The Accordion never grows larger than the value specified by its
                                Height property. This will cause the content to scroll if it is too large to be
                                displayed.</li>
                            <li><b>Fill</b> - The Accordion always stays the exact same size as its Height property.
                                This will cause the content to be expanded or shrunk if it isn't the right size.</li>
                        </ul>
                        <asp:Button ID="Button2" runat="server" Text="Button" />
                    </Content>
                </ajaxToolkit:AccordionPane>
                <ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server">
                    <Header>
                        <a href="">3. Control or Extender</a></Header>
                    <Content>
                       
        <table>
            <tr>
                <td style="width: 3px">
                     The Accordion is written using an extender like most of the other extenders in the
                        AJAX Control Toolkit. The extender expects its input in a very specific hierarchy
                        of container elements (like divs), so the Accordion and AccordionPane web controls
                        are used to generate the expected input for the extender. The extender can also
                        be used on its own if you provide it appropriate input.</td>
                <td>
                    <img src="images/add.gif" /></td>
                <td>
                    <img src="images/add.gif" /></td>
            </tr>
            <tr>
                <td style="width: 3px">
                    It also supports three AutoSize modes so it can fit in a</td>
                <td>
                    <img src="images/add.gif" /></td>
                <td>
                    <img src="images/add.gif" /></td>
            </tr>
            <tr>
                <td style="width: 3px">
                </td>
                <td>
                    <img src="images/delete.gif" /></td>
                <td>
                    <img src="images/edit.gif" /></td>
            </tr>
        </table>
                    </Content>
                </ajaxToolkit:AccordionPane>
            </Panes>
        </ajaxToolkit:Accordion>
                </ContentTemplate>
            </ajaxToolkit:TabPanel>
            <ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
            </ajaxToolkit:TabPanel>
        </ajaxToolkit:TabContainer> 
    
    </div>
    </form>
</body>
</html>

Sincerely,
Raymond Wen
Microsoft Online Community Support

Re: Accordion control flickering on IE6

02-25-2008, 3:54 PM

Contact

Loading...
rblaettler
Joined on 12-21-2004, 12:45 PM
New York
Posts 191

I've actually seen a lot of flickering too. Even if you try out the example from the toolkit and make all Panels the same size. If you open and close them you see the content below vibrating.

Don't really have a solution yet.

Remy Blaettler
Chief of the System
Supertext AG

Re: Accordion control flickering on IE6

05-05-2008, 8:00 AM

Contact

Loading...
msaboor
Joined on 05-05-2008, 11:27 AM
Posts 4

Hi dear friend!

I had the same problem and only guess what solved it?!

just set FadeTransitions="false"

easy?! I know you may want this fading effect but there is just one choice when you are using images and graphic in it:

1-Use fading effect, bite the bullet and watch the flickers there .

2-Repeat it with me: I DO NOT WANT FADING EFFECTS!

Re: Accordion control flickering on IE6

05-09-2008, 5:01 PM

Contact

Loading...
rblaettler
Joined on 12-21-2004, 12:45 PM
New York
Posts 191

I actually have fading disabled :-(

Remy Blaettler
Chief of the System
Supertext AG

Re: Accordion control flickering on IE6

05-09-2008, 11:57 PM

Contact

Loading...
msaboor
Joined on 05-05-2008, 11:27 AM
Posts 4

Re: Accordion control flickering on IE6

05-10-2008, 12:03 AM

Contact

Loading...
msaboor
Joined on 05-05-2008, 11:27 AM
Posts 4

Hi again! it didn't work! realy! so the problem should be from some thing else (I guess!). As you told you have tested the Ajax Control Toolkit sample too, ok this is another sample which has swf file in it so it must be worst than Ajax sample but it works ok in my system, try it! (of course use your own swf files) if the problem is still there so check somthing about your system.

<p>

<body>

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

</div>

<cc1:Accordion ID="Accordion1" runat="Server" style="direction:rtl"

SelectedIndex="-1"

AutoSize="None"

FadeTransitions="false"

TransitionDuration="250"

FramesPerSecond="40"

RequireOpenedPane="false"

SuppressHeaderPostbacks="true" Width="630px" >

<Panes>

<cc1:AccordionPane ID="AccordionPane1" runat="server" ContentCssClass="ContentStyle" HeaderCssClass="">

<asp:Image ID="Image1" runat="server" style="vertical-align:middle" ImageUrl="filmicon.jpg" Width="40px" Height="40px" />

<asp:Label ID="Label1" runat="server" Font-Names="Tahoma" Font-Size="Small" Text="how to share files?"></asp:Label>

</Header>

</object>

</Content>

</cc1:AccordionPane>

<cc1:AccordionPane ID="AccordionPane2" runat="server" ContentCssClass="ContentStyle" HeaderCssClass="">

<asp:Image ID="Image2" runat="server" style="vertical-align:middle" ImageUrl="filmicon.jpg" Width="40px" Height="40px" />

<asp:Label ID="Label2" runat="server" Font-Names="Tahoma" Font-Size="Small" Text="how to share printers?"></asp:Label>

</Header>

</object>

</Content>

</cc1:AccordionPane>

<\p>

Page 1 of 1 (7 items)

RSS Available

Advertise on ASP.NET

About this Site