RadRotator Arrows Style Issue

[Dan Miller]

I created an image gallery very similar to the one in the demo for the RadRotator (demo here) and the arrows for the rotator are appearing one and a half times on the top and bottom (see rotatorarrows.jpg). I am using the Forest skin. I have created the same rotator on a different website I built using the WebBlue skin and everything worked perfect. I assume it is some sort of CSS styling issue but I have no idea how to fix it. Help please!

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="LoadingPanel1">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadRotatorThumbs">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="ImagePreview" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="Server" Transparency="30" BackColor="#E0E0E0">
    <img src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' alt="Loading..." style="border: 0;" />
</telerik:RadAjaxLoadingPanel>
<table width="780px">
    <tr>
        <td width="180px">
            <telerik:RadRotator ID="RadRotatorThumbs" Skin="Forest" runat="server" OnItemClick="LoadImage" Width="130px" Height="400px" ItemHeight="60px" ItemWidth="115px" RotatorType="ButtonsOver" ScrollDirection="Up, Down" ScrollDuration="700" FrameDuration="1">
                <ItemTemplate>
                    <asp:Image runat="server" ID="Image" ImageUrl='<%# Eval("ImageUrl","{0}") %>' />
                </ItemTemplate>
            </telerik:RadRotator>
        </td>
        <td width="600px">
            <asp:Image runat="server" ID="ImagePreview" ImageUrl="" AlternateText="" />
        </td>
    </tr>
</table>

public partial class Controls_Photos : System.Web.UI.UserControl
{
    private string _thumbPath = "/thumbnails";
    private string _fullImagePath = "~/Images/photos";

    [Serializable()]
    private struct fileInfo
    {
        public string filename;
    }

    private List<fileInfo> imagesArray
    {
        get
        {
            return (List<fileInfo>)ViewState["imagesArray"];
        }
        set
        {
            ViewState["imagesArray"] = value;
        }
    }
    public string ThumbPath
    {
        get
        {
            return _thumbPath;
        }
        set
        {
            _thumbPath = value;
        }
    }

    public string FullImagePath
    {
        get
        {
            return _fullImagePath;
        }
        set
        {
            _fullImagePath = value;
        }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        DataTable myTable = CreateDataTable();
        if (!IsPostBack || object.Equals(imagesArray, null))
        {
            imagesArray = new List<fileInfo>();
            foreach (string fileName in System.IO.Directory.GetFiles(Server.MapPath(FullImagePath + ThumbPath), "*thumb*")) //add functionality to sort by modified date
            {
                fileInfo fInfo = new fileInfo();
                fInfo.filename = FullImagePath + ThumbPath + "/" + fileName.Substring(fileName.LastIndexOf("\\") + 1);
                imagesArray.Add(fInfo);
                AddRow(ref myTable, fInfo.filename);
            }
            RadRotatorThumbs.DataSource = myTable.DefaultView;
            RadRotatorThumbs.DataBind();

            ImagePreview.ImageUrl = imagesArray[0].filename.Replace("_thumb", "").Replace(ThumbPath, "");
        }
    }

    protected DataTable CreateDataTable()
    {
        DataTable myTable = new DataTable();

        DataColumn myColumn = new DataColumn();
        myColumn.DataType = Type.GetType("System.String");
        myColumn.ColumnName = "ImageUrl";
        myTable.Columns.Add(myColumn);

        return myTable;
    }

    protected void AddRow(ref DataTable myTable, string path)
    {
        DataRow myRow;
        myRow = myTable.NewRow();
        myRow["ImageUrl"] = path;
        myTable.Rows.Add(myRow);
    }

    protected void LoadImage(object sender, RadRotatorEventArgs e)
    {
        fileInfo fInfo = imagesArray[e.Item.Index];
        ImagePreview.ImageUrl = fInfo.filename.Replace("_thumb", "").Replace(ThumbPath, "");
    }
}

[Fiko]

Hi Dan,

I used the provided information but unfortunately I was not able to reproduce the behavior shown in the screenshot. I also believe that the issue is caused by some CSS properties that override the CSS settings of the RadRotator control. This is why, could you please modify my test project in order to show the problem and send it back? You need to open a new support ticket in order to attach the project back.

Greetings,
Fiko
the Telerik team