jump in expand animation

9 posts, 1 answers
  1. Zaynoun ElFalou
    Zaynoun ElFalou avatar
    12 posts
    Member since:
    Jan 2010

    Posted 19 Feb 2010 Link to this post

    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> 
     

  2. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 20 Feb 2010 Link to this post

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

    Steve
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Zaynoun ElFalou
    Zaynoun ElFalou avatar
    12 posts
    Member since:
    Jan 2010

    Posted 20 Feb 2010 Link to this post

    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 ?
  5. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 20 Feb 2010 Link to this post

    Hmmm...collapse works fine though right?  (does on my end)
  6. Zaynoun ElFalou
    Zaynoun ElFalou avatar
    12 posts
    Member since:
    Jan 2010

    Posted 20 Feb 2010 Link to this post

    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 ?
  7. Brad H
    Brad H avatar
    31 posts
    Member since:
    Aug 2009

    Posted 22 Feb 2010 Link to this post

    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.
  8. Zaynoun ElFalou
    Zaynoun ElFalou avatar
    12 posts
    Member since:
    Jan 2010

    Posted 22 Feb 2010 Link to this post

    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
  9. jerry
    jerry avatar
    103 posts
    Member since:
    Feb 2008

    Posted 14 Feb 2012 Link to this post

    Did anyone find a fix for this issue?  When I expand a section it jump right before the last item.  I have tried with many browsers and it happens in all of them.  When I collapse it works fine.

    I'm using AJAX Q3 2009 Net35.

    Thank you
  10. Answer
    Simon
    Admin
    Simon avatar
    2281 posts

    Posted 15 Feb 2012 Link to this post

    Hi jerry,

    We've made a major rewrite of the expand/collapse functionality of RadPanelBar about a half year ago, so I urge you to test with the latest version.

    Regards,
    Simon
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017