Rotator font changes after first rotation

[Eric]

I just updated to the new Q1 controls and since then, the rotator changes the font on one of the labels after the first rotation. The first set of data displays properly, then as soon as the second frame sets the message label defaults to Times or something. One thing I have checked is the web browser. I can not reproduce this in Chrome, Mozilla or Safari, only in IE (7.0.5730.13)

Here is the relavent code for the rotator.

CSS:

.newsFeed{        

    width: 425px;

    height: 130px;

    padding: 3px 0 0 20px;

    margin: 0 0 2px 0;       

}

.newsContent, .newsPoster{

    font:Trebuchet MS;

    font-family:Trebuchet MS;

    font-size: small;     

}

.newsContent {

   font-weight: bold;

}

ASPX:

<telerik:RadRotator ID="rrNews" runat="server" Height="130px"  

        ScrollDirection="Up" scrollDuration="2000" DataSourceID="newsDS" Width="446px" 

            FrameDuration="5000">             

        <ItemTemplate>

                <div class="newsFeed">

                    <asp:label runat="server" ID="message" CssClass="newsContent" Text='<%# bind("postMessage")%>'></asp:label>

                    <br />

                    <asp:label runat="server" ID="Label0" CssClass="newsPoster" Text="by "></asp:label>

                    <asp:label runat="server" ID="Label1" CssClass="newsPoster" Text='<%# bind("uName")%>'></asp:label>

                    <asp:label runat="server" ID="Label3" CssClass="newsPoster" Text="  on "></asp:label>

                    <asp:label runat="server" ID="Label2" CssClass="newsPoster" Text='<%# bind("postDate")%>'></asp:label>

                </div>

            </ItemTemplate>

        </telerik:RadRotator>

Any help is appreciated. Thank you.

[Fiko]

Hello Chabian,

I used your code, but I was not able to reproduce the problem. However, we are aware with such issue under IE when the RadRotator control works in animation mode( RotatorType="SlideShow" SlideShowAnimation-Type="Fade"  for example). In this case, as you see, this is a browser specific behavior and we cannot override it. For the time being I recommend you use bold text ( in animation mode ) and you should avoid this issue.
In case that you do not use animation, could you  please send us a simple demo where we can observe the problem? Once we have a better view over the problem, we will do our best to help.

Kind regards,
Fiko
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[James Van Buren]

I have the same issue, what used to work, stopped with q1 update.
It looks like you guys change the way rotators behave, but i dont see much documentation in changes document.
Is there a work around this issue? I simply have Html in ItemTemplate of a rotator

<

 

telerik:RadRotator ID="RadRotator4" runat="server" TransitionType="Scroll" height="80" UseSmoothScroll="true" FramesToShow="3"

 

 

FrameTimeout="3500" Width="100%" Visible="true" itemwidth="100%" scrolldirection="up">

 

[Fiko]

Hi James Van,

In the new version of the RadRotator control ( v 2009.1 311 ) we implemented a new scrolling and animation mechanism by using jQuery library. The problem occurs, because the jQuery internally manipulates the CSS filters (even during the scrolling the items, without animation being enabled for the RadRotator) and IE has some known problems with these filters. This is the reason why you experience the problem even when you use the RotatorType="AutomaticAdvance" with the newest version.
As I mentioned in my previous reply, we cannot override this browser behavior.

Sincerely yours,
Fiko
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[James Van Buren]

So, what's the solution than? is there different workaround, all my scrollers are unreadable right now.

[James Van Buren]

Ok, i played around with som CSS properties and i thing i got fix.
you can still see a small transition at the first scroll, but at least text is totally readable
i enclosed text in the container like <SPAN> and applied this stylesheet to it:

.lblScroll

{

 

font-family:Verdana;

 

 

font-size:8pt;

 

 

position:relative !important;

 

 

overflow:hidden;

 

}

I think overflow:hidden does the TRICK.

I better get them TELERIK POINTS FOR THIS:):):)

[Fiko]

Hi James,

I tested the provided code, but the problem still existed on the page - it still exist, but is not so visible because of the smaller font that you have set. As I mentioned above for the time being this behavior cannot be overridden.

All the best,
Fiko
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Eric]

I realize Telerik was just trying to stay ahead of the curve with the changes here, but why make changes that cause one of the most widely used browsers to not display the control properly. I realize that IE is the only browser that has this issue, but the average business office user, only has IE. Try explaining to your entire client base that their chosen browser is causing the problem not your web application.... any ideas for a work around? The only thing I can do is change the CSS of the text being displayed to a smaller font size to minimalize the issue's noticability.

[Fiko]

Hello Chabian,

For demonstration purposes I prepared a simple project that contains a RadRotator with a literal content and implemented a custom animation that animates the same literal content (<div>). You can check that the text content inside the RadRotator control is changing after the first rotation. Then you can test the behavior of the same text outside the RadRotator control - by clicking on the "Start custom animation"  button. You could see the same effect inside the RadRotator.
As you can see in the demo, the undesired behavior is not directly related to our control and we cannot override it. For the time being you can use this approach in your project.

Best regards,
Fiko
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[David]

Never mind all of that, all you need to do is set the background color and the issue goes away. The first instance of text is slightly crunchy, but its acceptable. And all subsequent ticker animation renders as desired.

Note that you have to set the bgcolor of the ItemTemplate; setting the BackColor property of the Rotator doesn't do anything.

<ItemTemplate>
<div style="width: 301px; height: 116px; background-color: White;">
<%# DataBinder.Eval(Container.DataItem,"TickerText") %><br /><br />
-- <i><%# DataBinder.Eval(Container.DataItem, "Attribution")%></i>
</div>
</ItemTemplate>

[Fiko]

Hello,

A solution that is already implemented in the RadRotator control can be found in this code library.


All the best,
Fiko
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.