100% Width Rotator

5 posts, 0 answers
  1. Oleg Fridman
    Oleg Fridman avatar
    77 posts
    Member since:
    Jan 2006

    Posted 04 May 2009 Link to this post

    I am having issues with 100% width rotators.

    This is a test page that is just a modification of the multiple scroller example downloaded with the latest release. I removed the second scroller and made the width of the Rotator 100%.

    I actually run into the same problem if I set the width of the Rotator to more than 725 pixels. 725 operates as expected, 726 causes the first to disappear and the last to just appear.

    Any timeframe on getting this addressed?

    1 <%@ Page AutoEventWireup="true" Inherits="Telerik.Web.Examples.Rotator.MultipleScroller.DefaultCS" 
    2     CodeFile="TestScroll.aspx.cs" Language="C#" %> 
    3  
    4 <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
    5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> 
    6 <html xmlns="http://www.w3.org/1999/xhtml">  
    7 <head id="Head1" runat="server">  
    8     <link rel="stylesheet" type="text/css" href="Styles.css" /> 
    9     <style type="text/css">  
    10     .Rotator  
    11     {  
    12     background-color:black;   
    13     cursor:default;   
    14     }  
    15  
    16     .Symbol  
    17     {  
    18     font-family: Verdana, Arial;   
    19     font-weight:bold;   
    20     font-size: 18px;   
    21     color:#3E7DBC;   
    22     }  
    23  
    24     .Quote  
    25     {  
    26     font-family: Verdana, Arial;   
    27     font-size: 11px;   
    28     color:#64962D;   
    29     }  
    30  
    31     .Change  
    32     {  
    33     font-family: Verdana, Arial;   
    34     font-size: 11px;   
    35     color: gray;   
    36     }  
    37  
    38     .Link  
    39     {  
    40     font-family: Verdana, Arial;   
    41     font-size: 10px;   
    42     color:#3E7DBC;   
    43     }  
    44     </style> 
    45 </head> 
    46 <body class="BODY">  
    47     <form runat="server" id="mainForm" method="post" style="width: 100%">  
    48         <asp:ScriptManager ID="ScriptManager1" runat="server">  
    49         </asp:ScriptManager> 
    50         <div style="width: 90%">  
    51             <div class="top">  
    52                 <img src="Images/top.gif" width="452" height="35" alt="" /></div>  
    53             <div class="marqueeTopBg">  
    54                 <div class="marqueeTop_Text">  
    55                     <telerik:RadRotator ScrollDirection="left" DataSourceID="xmlDataSource1" FrameDuration="1" 
    56                         Width="100%" Height="24" ScrollDuration="2000" ID="Rotator1" runat="server">  
    57                         <ItemTemplate> 
    58                             <table width="130" cellpadding="0" cellspacing="3" border="0">  
    59                                 <tr> 
    60                                     <td class="symbol" style="font-weight: bold; color: #3e7dbc; cursor: default;">  
    61                                         <%# XPath("Company")%> 
    62                                     </td> 
    63                                     <td class="Quote" style="cursor: default;">  
    64                                         <%# XPath("Price")%> 
    65                                     </td> 
    66                                     <td class="Change" style="cursor: default;">  
    67                                         <%# XPath("Difference")%> 
    68                                     </td> 
    69                                     <td style="cursor: default;">  
    70                                         <img src='<%# XPath("Image") %>' style="border: 0px" alt="" /></td>  
    71                                     <td class="Quote" align="left" style="cursor: default;">  
    72                                         &nbsp;&nbsp;</td> 
    73                                 </tr> 
    74                             </table> 
    75                         </ItemTemplate> 
    76                     </telerik:RadRotator> 
    77                 </div> 
    78             </div> 
    79             <div class="bottom">  
    80                 <img src="Images/bottom.gif" width="452" height="108" alt="" /></div>  
    81         </div> 
    82         <asp:XmlDataSource ID="xmlDataSource1" runat="Server" DataFile="/TestPages/upperMarquee.xml"></asp:XmlDataSource> 
    83     </form> 
    84 </body> 
    85 </html> 
    86  
  2. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 05 May 2009 Link to this post

    Hello Oleg,

    The RadRotator control, does not support values in percent and you need to use fixed values in its declaration. This restriction is by design, because the rotator control needs to know the Items' size, when it is loaded, in order to determine where an item starts or ends. In the RadRotator's declaration I suggest you specify all of the following properties: Width, ItemWidth, Height, ItemHeight (in pixels). Those properties are important and you need them in order to make the RadRotator control works properly.

    Greetings,
    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. Dave
    Dave avatar
    11 posts
    Member since:
    Apr 2009

    Posted 01 Nov 2009 Link to this post

    This is an issue for me too. I have a 3 column layout with a variable size central content column, so I'm unable to use your control as I need to set 100% width. Couldn't you determine the size via javascript?
  5. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 04 Nov 2009 Link to this post

    Hi Dave,

    The control has set_width and set_height client-side methods, that changes the size of the control on the client. You could use them and implement a custom logic that will simulate the relative size behavior of the control. Note that, however, that we do not recommend you do this because this may leads to layout problems inside the RadRotator's template.

    Best wishes,
    Fiko
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  6. Dave
    Dave avatar
    11 posts
    Member since:
    Apr 2009

    Posted 04 Nov 2009 Link to this post

    Hi Fiko,

    Thanks for the reply. Rather than trying fit a square peg into a round hole, I just wrote my own code in the end. I appreciate you can't always handle all situations :)

    Regards,

    David
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017