This is a migrated thread and some comments may be shown as answers.

100% Width Rotator

4 Answers 180 Views
Rotator
This is a migrated thread and some comments may be shown as answers.
Oleg Fridman
Top achievements
Rank 2
Oleg Fridman asked on 04 May 2009, 05:56 PM
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?

<%@ Page AutoEventWireup="true" Inherits="Telerik.Web.Examples.Rotator.MultipleScroller.DefaultCS" 
    CodeFile="TestScroll.aspx.cs" Language="C#" %> 
 
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">  
<head id="Head1" runat="server">  
    <link rel="stylesheet" type="text/css" href="Styles.css" /> 
    <style type="text/css">  
    .Rotator  
    {  
    background-color:black;   
    cursor:default;   
    }  
 
    .Symbol  
    {  
    font-family: Verdana, Arial;   
    font-weight:bold;   
    font-size: 18px;   
    color:#3E7DBC;   
    }  
 
    .Quote  
    {  
    font-family: Verdana, Arial;   
    font-size: 11px;   
    color:#64962D;   
    }  
 
    .Change  
    {  
    font-family: Verdana, Arial;   
    font-size: 11px;   
    color: gray;   
    }  
 
    .Link  
    {  
    font-family: Verdana, Arial;   
    font-size: 10px;   
    color:#3E7DBC;   
    }  
    </style> 
</head> 
<body class="BODY">  
    <form runat="server" id="mainForm" method="post" style="width: 100%">  
        <asp:ScriptManager ID="ScriptManager1" runat="server">  
        </asp:ScriptManager> 
        <div style="width: 90%">  
            <div class="top">  
                <img src="Images/top.gif" width="452" height="35" alt="" /></div>  
            <div class="marqueeTopBg">  
                <div class="marqueeTop_Text">  
                    <telerik:RadRotator ScrollDirection="left" DataSourceID="xmlDataSource1" FrameDuration="1" 
                        Width="100%" Height="24" ScrollDuration="2000" ID="Rotator1" runat="server">  
                        <ItemTemplate> 
                            <table width="130" cellpadding="0" cellspacing="3" border="0">  
                                <tr> 
                                    <td class="symbol" style="font-weight: bold; color: #3e7dbc; cursor: default;">  
                                        <%# XPath("Company")%> 
                                    </td> 
                                    <td class="Quote" style="cursor: default;">  
                                        <%# XPath("Price")%> 
                                    </td> 
                                    <td class="Change" style="cursor: default;">  
                                        <%# XPath("Difference")%> 
                                    </td> 
                                    <td style="cursor: default;">  
                                        <img src='<%# XPath("Image") %>' style="border: 0px" alt="" /></td>  
                                    <td class="Quote" align="left" style="cursor: default;">  
                                        &nbsp;&nbsp;</td> 
                                </tr> 
                            </table> 
                        </ItemTemplate> 
                    </telerik:RadRotator> 
                </div> 
            </div> 
            <div class="bottom">  
                <img src="Images/bottom.gif" width="452" height="108" alt="" /></div>  
        </div> 
        <asp:XmlDataSource ID="xmlDataSource1" runat="Server" DataFile="/TestPages/upperMarquee.xml"></asp:XmlDataSource> 
    </form> 
</body> 
</html> 
 

4 Answers, 1 is accepted

Sort by
0
Fiko
Telerik team
answered on 05 May 2009, 11:05 AM
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.
0
Dave
Top achievements
Rank 1
answered on 02 Nov 2009, 03:10 AM
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?
0
Fiko
Telerik team
answered on 04 Nov 2009, 11:19 AM
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.
0
Dave
Top achievements
Rank 1
answered on 05 Nov 2009, 01:13 AM
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
Tags
Rotator
Asked by
Oleg Fridman
Top achievements
Rank 2
Answers by
Fiko
Telerik team
Dave
Top achievements
Rank 1
Share this question
or