Rotator font changes after first rotation

11 posts, 0 answers
  1. chabian
    chabian avatar
    62 posts
    Member since:
    Sep 2005

    Posted 12 Mar 2009 Link to this post

    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.
  2. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 16 Mar 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. James Van Buren
    James Van Buren avatar
    31 posts
    Member since:
    May 2007

    Posted 17 Mar 2009 Link to this post

    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">

     

  5. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 19 Mar 2009 Link to this post

    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.
  6. James Van Buren
    James Van Buren avatar
    31 posts
    Member since:
    May 2007

    Posted 30 Mar 2009 Link to this post

    So, what's the solution than? is there different workaround, all my scrollers are unreadable right now.
  7. James Van Buren
    James Van Buren avatar
    31 posts
    Member since:
    May 2007

    Posted 30 Mar 2009 Link to this post

    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:):):)

  8. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 31 Mar 2009 Link to this post

    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.
  9. chabian
    chabian avatar
    62 posts
    Member since:
    Sep 2005

    Posted 01 Apr 2009 Link to this post

    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.
  10. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 03 Apr 2009 Link to this post

    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.
  11. David Tessler
    David Tessler avatar
    23 posts
    Member since:
    Feb 2005

    Posted 16 Jun 2009 Link to this post

    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>
  12. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 17 Jun 2009 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017