DevTools

Products Dropdown menu
The Ultimate toolbox for developers
WEB UI CONTROLS & COMPONENTS
DESKTOP UI CONTROLS & COMPONENTS
- WPF
- WinForms
VISUAL STUDIO PRODUCTIVITY TOOLS
HTML5 / JavaScript Widgets
DATA TOOLS
- Reporting
- OpenAccess
MOBILE UI CONTROLS
- Windows Phone
Unit & Functional Testing
- TestStudio Express
- JustMock
Download Free Trial With dedicated support.
Free trials
Purchase Dropdown menu
Buy the Ultimate toolbox for developers
Buy Online
Call us
- +1-888-365-2779
- +44-20-7291-0580
- +49-89-2441642-70
- +61-2-8090-1465
Community & Support Dropdown menu
Welcome to the Telerik community
Community programs
Like us on facebook Follow us on twitter
Services
Blogs

Toggle search

Community & Support

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAXPanelBarjump in expand animation

Not answered jump in expand animation

Feed from this thread

Zaynoun ElFalou

Posted on Feb 19, 2010 (permalink)

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>

Steve Master

Posted on Feb 20, 2010 (permalink)

Try changing your expand animation type...seems that "OutQuad" jumps...however "InQuad" (among others) seems to be fine here

Steve

Reply

Zaynoun ElFalou

Posted on Feb 20, 2010 (permalink)

I tried all the expand animation types and they share the same problem. More than this, i slowed down the animation by increasing the duration, i noticed that it indeed jump. so 10 secs duration, it reach half the height at 10 sec, then jump. at collapse, it works just fine.
The same is for all browsers, is there a problem in timer ?

Reply

Steve Master

Posted on Feb 20, 2010 (permalink)

Hmmm...collapse works fine though right? (does on my end)

Reply

Zaynoun ElFalou

Posted on Feb 20, 2010 (permalink)

Exactly. Collapse works right, expand jump.
This is very trivial case, i guess there is a bug somewhere in the animation javascript. I guess you're getting also the jump in expand, right? Do you have any guess why and how solve this problem ?

Reply

Brad H

Posted on Feb 22, 2010 (permalink)

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.

Reply

Zaynoun ElFalou

Posted on Feb 22, 2010 (permalink)

No i couldn't solve the problem, my problem happens if the mode is to collapse all, then i open one, maybe the javascript calculate the height wrong and that make it jump.
i think my problem is different than yours, my jump happen vertically if the animation is happening vertically.
What is strange is that this problem so clear and yet, i see no other person mentioning it in forums.i am not trying to nesting, sub-classing... anyway, i still hope that someone respond me, and i raised a ticket yesterday

Reply