This is a migrated thread and some comments may be shown as answers.

jump in expand animation

8 Answers 129 Views

PanelBar

This is a migrated thread and some comments may be shown as answers.

Zaynoun ElFalou asked on 19 Feb 2010, 05:59 PM

A long paragraph will make the expand animation to jump, it appears that if the height of panel item > of something, this behavior happens. The same problem happens on all browsers (i tested on firefox, IE, and google chrome all fully updated).
Is this normal, can this be fixed ?

Thanks

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!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></title> 
        
                <style type="text/css"> 
        
                    </style> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
        
                </telerik:RadScriptManager> 
        
                <div> 
        
                    <telerik:RadPanelBar runat="server" ID="RadPanelBar2" PersistStateInCookie="True" 
        
                        Skin="Web20" ExpandAnimation-Type="OutQuad" ExpandAnimation-Duration="1000" CollapseAnimation-Type="OutQuad" 
        
                        CollapseAnimation-Duration="1000"> 
        
                        <Items> 
        
                            <telerik:RadPanelItem Text="RadPanelItem"> 
        
                                <Items> 
        
                                    <telerik:RadPanelItem> 
        
                                        <ItemTemplate> 
        
                                            <p> 
        
                                                this is a line of textth this is a line of textth is is a line of textthis is a 
        
                                                line of textthis this is a line of textth this is a line of textth h this is a line 
        
                                                of textth is is a line of textt <br /> 
        
                                                his is a line of textthis this is a line of textth this is a line of textth 
        
                                            </p> 
        
                                            <p> 
        
                                                this is a line of text</p> 
        
                                            <p> 
        
                                                this is a line of text</p> 
        
                                            <p> 
        
                                                this is a line of text</p> 
        
                                            <p> 
        
                                                this is a line of text</p> 
        
                                        </ItemTemplate> 
        
                                    </telerik:RadPanelItem> 
        
                                </Items> 
        
                            </telerik:RadPanelItem> 
        
                        </Items> 
        
                    </telerik:RadPanelBar> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

8 Answers, 1 is accepted

answered on 22 Feb 2010, 08:59 PM

I'm getting this exact same problem. The item "jumps" to the left for a split second on expand. It occurs with sporadic behavior for me. Typically, if the item is expanded, collapsed and then expanded again, you'll see the jump. So, on the second expand. I also see it on the "entering" expand. i.e. the first item the user expands. It seems that the item goes through a brief transition between the collapsed image and the expanded image where there is no image at all. This brief transition causes the text to be shifted to the left for a split second causing the "jump" affect. I have not been able to correct this issue with any CSS changes or animation type/duration changes. Any help would be greatly appreciated. As the previous poster stated, it is a minor issue but still pretty annoying.

Accepted