Left Alignment Problem

4 posts, 0 answers
  1. Ryan
    Ryan avatar
    3 posts
    Member since:
    Dec 2010

    Posted 20 Dec 2010 Link to this post

    I have built a control in Sitefinity that uses the RadRotator.  I have added two meta fields to the blog module, one boolean called Featured_Post and an image from the image library called Featured_Thumbnail.

    My problem is with the display of the item in the rotator.  There seems to be a section of post on the left side I can't get rid of (please see screen shot) with each rotation (automatic advance) it leave a small section of the last post on the screen.

    I will attach a screen shot of the problem, my code is below. Thanks for your help

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="FeaturedPost.ascx.cs" Inherits="FeaturedPost" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <style type="text/css">
        .rotator 
        {
            margin-top: 3px;
            margin-left: auto;
            margin-right: auto;
            width: 700px;
            height: 200px;
        }
    </style>
        <telerik:RadRotator ID="RadRotator1" runat="server" Height="200"
            ScrollDuration="500" FrameDuration="2000" ItemHeight="200" OnItemDataBound="RotatorItemDataBound" RotatorType="AutomaticAdvance"
            ItemWidth="100" CssClass="rotator" BorderStyle="Solid" BorderWidth="1px">
            <ItemTemplate>
                <div style="width:100px; height:200px;">
                    <div style="overflow:hidden; margin-bottom:2px;">
                        <asp:Image runat="server" ID="fpImage" Width="100px" Height="100px" />
                    </div>
                    <div style="overflow:hidden; width:100px; height:95px; margin-bottom:3px">
                        <asp:HyperLink runat="server" ID="fpLink" />
                    </div>
                </div>
            </ItemTemplate>
        </telerik:RadRotator>
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="FeaturedPost.ascx.cs" Inherits="FeaturedPost" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <style type="text/css">
        .rotator 
        {
            margin-top: 3px;
            margin-left: auto;
            margin-right: auto;
            width: 700px;
            height: 200px;
        }
    </style>
        <telerik:RadRotator ID="RadRotator1" runat="server" Height="200"
            ScrollDuration="500" FrameDuration="2000" ItemHeight="200" OnItemDataBound="RotatorItemDataBound" RotatorType="AutomaticAdvance"
            ItemWidth="100" CssClass="rotator" BorderStyle="Solid" BorderWidth="1px">
            <ItemTemplate>
                <div style="width:100px; height:200px;">
                    <div style="overflow:hidden; margin-bottom:2px;">
                        <asp:Image runat="server" ID="fpImage" Width="100px" Height="100px" />
                    </div>
                    <div style="overflow:hidden; width:100px; height:95px; margin-bottom:3px">
                        <asp:HyperLink runat="server" ID="fpLink" />
                    </div>
                </div>
            </ItemTemplate>
        </telerik:RadRotator>
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="FeaturedPost.ascx.cs" Inherits="FeaturedPost" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <style type="text/css">
        .rotator 
        {
            margin-top: 3px;
            margin-left: auto;
            margin-right: auto;
            width: 700px;
            height: 200px;
        }
    </style>
        <telerik:RadRotator ID="RadRotator1" runat="server" Height="200"
            ScrollDuration="500" FrameDuration="2000" ItemHeight="200" OnItemDataBound="RotatorItemDataBound" RotatorType="AutomaticAdvance"
            ItemWidth="100" CssClass="rotator" BorderStyle="Solid" BorderWidth="1px">
            <ItemTemplate>
                <div style="width:100px; height:200px;">
                    <div style="overflow:hidden; margin-bottom:2px;">
                        <asp:Image runat="server" ID="fpImage" Width="100px" Height="100px" />
                    </div>
                    <div style="overflow:hidden; width:100px; height:95px; margin-bottom:3px">
                        <asp:HyperLink runat="server" ID="fpLink" />
                    </div>
                </div>
            </ItemTemplate>
        </telerik:RadRotator>
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="FeaturedPost.ascx.cs" Inherits="FeaturedPost" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <style type="text/css">
        .rotator 
        {
            margin-top: 3px;
            margin-left: auto;
            margin-right: auto;
            width: 700px;
            height: 200px;
        }
    </style>
        <telerik:RadRotator ID="RadRotator1" runat="server" Height="200"
            ScrollDuration="500" FrameDuration="2000" ItemHeight="200" OnItemDataBound="RotatorItemDataBound" RotatorType="AutomaticAdvance"
            ItemWidth="100" CssClass="rotator" BorderStyle="Solid" BorderWidth="1px">
            <ItemTemplate>
                <div style="width:100px; height:200px;">
                    <div style="overflow:hidden; margin-bottom:2px;">
                        <asp:Image runat="server" ID="fpImage" Width="100px" Height="100px" />
                    </div>
                    <div style="overflow:hidden; width:100px; height:95px; margin-bottom:3px">
                        <asp:HyperLink runat="server" ID="fpLink" />
                    </div>
                </div>
            </ItemTemplate>
        </telerik:RadRotator>
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="FeaturedPost.ascx.cs" Inherits="FeaturedPost" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <style type="text/css">
        .rotator 
        {
            margin-top: 3px;
            margin-left: auto;
            margin-right: auto;
            width: 700px;
            height: 200px;
        }
    </style>
        <telerik:RadRotator ID="RadRotator1" runat="server" Height="200"
            ScrollDuration="500" FrameDuration="2000" ItemHeight="200" OnItemDataBound="RotatorItemDataBound" RotatorType="AutomaticAdvance"
            ItemWidth="100" CssClass="rotator" BorderStyle="Solid" BorderWidth="1px">
            <ItemTemplate>
                <div style="width:100px; height:200px;">
                    <div style="overflow:hidden; margin-bottom:2px;">
                        <asp:Image runat="server" ID="fpImage" Width="100px" Height="100px" />
                    </div>
                    <div style="overflow:hidden; width:100px; height:95px; margin-bottom:3px">
                        <asp:HyperLink runat="server" ID="fpLink" />
                    </div>
                </div>
            </ItemTemplate>
        </telerik:RadRotator>
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="FeaturedPost.ascx.cs" Inherits="FeaturedPost" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <style type="text/css">
        .rotator 
        {
            margin-top: 3px;
            margin-left: auto;
            margin-right: auto;
            width: 700px;
            height: 200px;
        }
    </style>
        <telerik:RadRotator ID="RadRotator1" runat="server" Height="200"
            ScrollDuration="500" FrameDuration="2000" ItemHeight="200" OnItemDataBound="RotatorItemDataBound" RotatorType="AutomaticAdvance"
            ItemWidth="100" CssClass="rotator" BorderStyle="Solid" BorderWidth="1px">
            <ItemTemplate>
                <div style="width:100px; height:200px;">
                    <div style="overflow:hidden; margin-bottom:2px;">
                        <asp:Image runat="server" ID="fpImage" Width="100px" Height="100px" />
                    </div>
                    <div style="overflow:hidden; width:100px; height:95px; margin-bottom:3px">
                        <asp:HyperLink runat="server" ID="fpLink" />
                    </div>
                </div>
            </ItemTemplate>
        </telerik:RadRotator>
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="FeaturedPost.ascx.cs" Inherits="FeaturedPost" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <style type="text/css">
        .rotator 
        {
            margin-top: 3px;
            margin-left: auto;
            margin-right: auto;
            width: 700px;
            height: 200px;
        }
    </style>
        <telerik:RadRotator ID="RadRotator1" runat="server" Height="200"
            ScrollDuration="500" FrameDuration="2000" ItemHeight="200" OnItemDataBound="RotatorItemDataBound" RotatorType="AutomaticAdvance"
            ItemWidth="100" CssClass="rotator" BorderStyle="Solid" BorderWidth="1px">
            <ItemTemplate>
                <div style="width:100px; height:200px;">
                    <div style="overflow:hidden; margin-bottom:2px;">
                        <asp:Image runat="server" ID="fpImage" Width="100px" Height="100px" />
                    </div>
                    <div style="overflow:hidden; width:100px; height:95px; margin-bottom:3px">
                        <asp:HyperLink runat="server" ID="fpLink" />
                    </div>
                </div>
            </ItemTemplate>
        </telerik:RadRotator>
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="FeaturedPost.ascx.cs" Inherits="FeaturedPost" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <style type="text/css">
        .rotator 
        {
            margin-top: 3px;
            margin-left: auto;
            margin-right: auto;
            width: 700px;
            height: 200px;
        }
    </style>
        <telerik:RadRotator ID="RadRotator1" runat="server" Height="200"
            ScrollDuration="500" FrameDuration="2000" ItemHeight="200" OnItemDataBound="RotatorItemDataBound" RotatorType="AutomaticAdvance"
            ItemWidth="100" CssClass="rotator" BorderStyle="Solid" BorderWidth="1px">
            <ItemTemplate>
                <div style="width:100px; height:200px;">
                    <div style="overflow:hidden; margin-bottom:2px;">
                        <asp:Image runat="server" ID="fpImage" Width="100px" Height="100px" />
                    </div>
                    <div style="overflow:hidden; width:100px; height:95px; margin-bottom:3px">
                        <asp:HyperLink runat="server" ID="fpLink" />
                    </div>
                </div>
            </ItemTemplate>
        </telerik:RadRotator>
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="FeaturedPost.ascx.cs" Inherits="FeaturedPost" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <style type="text/css">
        .rotator 
        {
            margin-top: 3px;
            margin-left: auto;
            margin-right: auto;
            width: 700px;
            height: 200px;
        }
    </style>
        <telerik:RadRotator ID="RadRotator1" runat="server" Height="200"
            ScrollDuration="500" FrameDuration="2000" ItemHeight="200" OnItemDataBound="RotatorItemDataBound" RotatorType="AutomaticAdvance"
            ItemWidth="100" CssClass="rotator" BorderStyle="Solid" BorderWidth="1px">
            <ItemTemplate>
                <div style="width:100px; height:200px;">
                    <div style="overflow:hidden; margin-bottom:2px;">
                        <asp:Image runat="server" ID="fpImage" Width="100px" Height="100px" />
                    </div>
                    <div style="overflow:hidden; width:100px; height:95px; margin-bottom:3px">
                        <asp:HyperLink runat="server" ID="fpLink" />
                    </div>
                </div>
            </ItemTemplate>
        </telerik:RadRotator>
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="FeaturedPost.ascx.cs" Inherits="FeaturedPost" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <style type="text/css">
        .rotator
        {
            margin-top: 3px;
            margin-left: auto;
            margin-right: auto;
            width: 700px;
            height: 200px;
        }
    </style>
        <telerik:RadRotator ID="RadRotator1" runat="server" Height="200"
            ScrollDuration="500" FrameDuration="2000" ItemHeight="200" OnItemDataBound="RotatorItemDataBound" RotatorType="AutomaticAdvance"
            ItemWidth="100" CssClass="rotator" BorderStyle="Solid" BorderWidth="1px">
            <ItemTemplate>
                <div style="width:100px; height:200px;">
                    <div style="overflow:hidden; margin-bottom:2px;">
                        <asp:Image runat="server" ID="fpImage" Width="100px" Height="100px" />
                    </div>
                    <div style="overflow:hidden; width:100px; height:95px; margin-bottom:3px">
                        <asp:HyperLink runat="server" ID="fpLink" />
                    </div>
                </div>
            </ItemTemplate>
        </telerik:RadRotator>


    using System;
    using System.Web;
    using System.Web.UI.WebControls;
    using Telerik.Cms.Web.UI;
    using System.ComponentModel;
    using Telerik.Rss;
    using Telerik.Framework.Web.Design;
    using Telerik.Cms.Engine;
    using Telerik.Cms;
    using Telerik.Blogs;
    using System.Text;
    using System.Collections;
     
    public partial class FeaturedPost : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            RadRotator1.Width = ControlWidth;
     
            BlogManager manager = new BlogManager();
            IList posts;
            if (selectedBlogs != null)
                posts = manager.Content.GetContent(0, 0, "", selectedBlogs);
            else
                posts = manager.Content.GetContent();
     
            if (posts.Count > 0)
            {
                ArrayList myFeaturedPosts = new ArrayList();
                for (int i = 0; i < posts.Count; i++)
                {
                    IContent item = (IContent)posts[i];
     
                    if ((Boolean)item.GetMetaData("Featured_Post"))
                    {
                        rotatorObject tempR = new rotatorObject();
                        IBlog blog = manager.GetBlog(item.ParentID);
                        tempR.URL = GetUrl(blog.BlogPage.Replace(".aspx", "/") + item.UrlWithExtension);
                        tempR.Title = item.GetMetaData("Title").ToString();
                        if (item.GetMetaData("Featured_Thumbnail") != null)
                        {
                            string tempImageURL = item.GetMetaData("Featured_Thumbnail").ToString().Trim();
                            if (tempImageURL != string.Empty)
                            {
                                tempR.imageURL = tempImageURL;
                            }
                        }
     
                        myFeaturedPosts.Add(tempR);
                    }
     
                }
     
                RadRotator1.DataSource = myFeaturedPosts;
                RadRotator1.DataBind();
            }
     
             
     
        }
     
        protected void RotatorItemDataBound(object sender, Telerik.Web.UI.RadRotatorEventArgs e)
        {
            Image i = (Image)e.Item.FindControl("fpImage");
            HyperLink h = (HyperLink)e.Item.FindControl("fpLink");
     
            rotatorObject r = (rotatorObject)e.Item.DataItem;
     
            i.ImageUrl = r.imageURL;
            h.Text = r.Title;
            h.NavigateUrl = r.URL;
        }
     
        #region Properties
     
        public int ControlWidth
        {
            get
            {
                if (ViewState["ControlWidth"] == null)
                    return 400;
     
                return int.Parse(ViewState["ControlWidth"].ToString());
            }
            set { ViewState["ControlWidth"] = value; }
        }
     
        [TypeConverter("Telerik.Blogs.WebControls.SelectedBlogsConverter, Telerik.Blogs")]
        [WebEditor("Telerik.Blogs.WebControls.BlogsSelector, Telerik.Blogs")]
        public Guid[] SelectedBlogs
        {
            get
            {
                return this.selectedBlogs;
            }
            set
            {
                this.selectedBlogs = value;
            }
        }
        public virtual string ProviderName
        {
            get
            {
                return this.providerName;
            }
            set
            {
                this.providerName = value;
            }
        }
        private Guid[] selectedBlogs;
        private string providerName = string.Empty;
     
        #endregion
     
        public string GetUrl(string value)
        {
            // if our value starts with ~/  
            // we return url 
            if (value.StartsWith("~/"))
                return this.ResolveUrl(value);
     
            if (value.StartsWith("["))
            {
                int idx = value.IndexOf("]");
                //getting the provider [Libraries] 
                string provider = value.Substring(1, idx - 1);
                string strId = value.Substring(idx + 1);
                Guid id = new Guid(strId);
     
                if (ContentManager.Providers.ContainsKey(provider))
                {
                    IContent cnt = ContentManager.Providers[provider].GetContent(id);
                    if (cnt != null)
                        return VirtualPathUtility.ToAbsolute(cnt.UrlWithExtension, this.Context.Request.ApplicationPath);
                }
            }
            return value.ToString();
        
     
        public class rotatorObject
        {
            public string imageURL
            { get; set; }
            public string URL
            { get; set; }
            public string Title
            { get; set; }
        }
    }
  2. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 23 Dec 2010 Link to this post

    Hello Ryan,

    The problem comes from the fact that the Width, ItemWidth, Height and ItemHeight properties are not configured properly. You need to configure the control following the instructions in this help page. Please note that you need to take into account the margin and padding values set to the elements as well.


    All the best,
    Fiko
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ryan
    Ryan avatar
    3 posts
    Member since:
    Dec 2010

    Posted 24 Dec 2010 Link to this post

    I was trying to follow that page when I did it the first time.  And it seemed like all the numbers add up correctly. I have revamped my code a bit and added explicit margin and padding info, but nothing has changed:

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="FeaturedPost.ascx.cs" Inherits="FeaturedPost" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <style type="text/css">
        .noPad
        {
            padding:0 0 0 0;
            margin:0 0 0 0;
        }
        .rotator
        {
            margin:0 0 0 0;
            padding:0 0 0 0;
        }
    </style>
        <div style="padding:0 0 0 0; margin:0 0 0 0;">
        <telerik:RadRotator ID="RadRotator1" runat="server" Height="200"
            ScrollDuration="500" FrameDuration="2000" ItemHeight="200" OnItemDataBound="RotatorItemDataBound" RotatorType="AutomaticAdvance"
            ItemWidth="100" BorderStyle="Solid" BorderWidth="1px" CssClass="rotator">
            <ItemTemplate>
                <div style="width:100px; height:200px; margin:0 0 0 0; padding:0 0 0 0;">
                    <div style="overflow:hidden; margin:0px 0px 2px 0px; padding:0px 0px 0px 0px;">
                        <asp:Image runat="server" ID="fpImage" Width="100px" Height="100px" CssClass="noPad" />
                    </div>
                    <div style="overflow:hidden; width:100px; height:95px; margin:0px 0px 3px 0px; padding:0px 0px 0px 0px;">
                        <asp:HyperLink runat="server" ID="fpLink" CssClass="noPad" />
                    </div>
                </div>
            </ItemTemplate>
        </telerik:RadRotator>
    </div>

    I have also used firebug to find the problem, but it seems that almost everything is set to margins 0 and padding 0.  I did another test example in a blank asp.net website, and everything was fine, so I believe my problem has to do with Sitefinity, although like I said I tried to pinpoint the css problem in firebug, and am unable to find it.  I'm at a loss here, any help would be appreciated. 
  5. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 29 Dec 2010 Link to this post

    Hello Ryan,

    I have checked the provided code and I was noticed that the RadRotator's width property is not set. Could you please set it according the Width of the ItemTemplate? In case that this does not help, could you please open a new support ticket and send me the project that causes the problem? I will check it and do my best to provide a working solution as soon as possible.



    Best wishes,
    Fiko
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top