Zaynoun ElFalou
Top achievements
Rank 1
Rank 1
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
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
0
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
Rank 2
Iron
Veteran
answered on 20 Feb 2010, 03:49 PM
Try changing your expand animation type...seems that "OutQuad" jumps...however "InQuad" (among others) seems to be fine here
Steve
Steve
0
Zaynoun ElFalou
Top achievements
Rank 1
Rank 1
answered on 20 Feb 2010, 05:05 PM
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 ?
The same is for all browsers, is there a problem in timer ?
0
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
Rank 2
Iron
Veteran
answered on 20 Feb 2010, 09:46 PM
Hmmm...collapse works fine though right? (does on my end)
0
Zaynoun ElFalou
Top achievements
Rank 1
Rank 1
answered on 21 Feb 2010, 01:03 AM
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 ?
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 ?
0
Brad H
Top achievements
Rank 2
Rank 2
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.
0
Zaynoun ElFalou
Top achievements
Rank 1
Rank 1
answered on 23 Feb 2010, 12:24 AM
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
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
0
jerry
Top achievements
Rank 1
Rank 1
answered on 14 Feb 2012, 03:23 PM
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
I'm using AJAX Q3 2009 Net35.
Thank you
0
Accepted
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
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 >>