+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / Rotator item height

Rotator item height

4 posts, 1 answered
  1. Johnny
    Johnny avatar
    45 posts
    Registered:
    08 Mar 2009
    04 Feb 2011
    Link to this post
    Hello

    I have some problems getting the right item height on my RadRotator. Everything works fine on localhost but in my clients sitefinity site the item height is not respected and gets a "Element.style" 300px, according to firebug. I think I´ve done all by the book but somehow in the live site something goes wrong. Does anyone have some pointers on this matter? I´m going to have multiple Rotators on the site, is there anything else I should keep in mind regarding that?

    Edit: I also have an issue with Rotator and IE. The first time a item is shown the item is shown correctly, but from there on the item gets slightly pushed away. The difference is 20px so I suspect that this something to do with the buttons. It works fine in FF and I dont have any buttons applied. Is this a known issue? And what can I do to avoid it?
    I use  IE version 8.0.6001.18999 if that is to some use.

    <telerik:RadRotator ID="RadRotator1" runat="server" 
                    DataSourceID="SqlDataSource1" ScrollDirection="Up" ScrollDuration="800" RotatorType="SlideShow"
                    SlideShowAnimation-Type="Fade" WrapFrames="true" Width="300px" Height="300px" ItemHeight="150px"
                    ItemWidth="300px" FrameDuration="10000" CssClass="~/Custom/Controls/MpNews/CSS/MpNews.css">
                    <ItemTemplate>
                    <div class="localNewsArticleContainer">
                        <div class="localNewsTitle">
                            <asp:Label ID="lblTitle" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
                        </div>
                        <div class="localNewsDate">
                            <asp:Label ID="lblDate" runat="server" Text='<%# Eval("Date") %>'></asp:Label>
                        </div>
                        <div class="localNewsText">
                            <asp:Label ID="lblDescription" runat="server" Text='<%# Eval("Description") %>'></asp:Label>
                        </div>
                        <div class="localNewsLink">
                            <asp:HyperLink ID="lblLink" runat="server" Text="Hela artikeln på sr.se" NavigateUrl='<%# Eval("Link") %>' Target="_blank"></asp:HyperLink>
                        </div>
                    </div>
                    </ItemTemplate>
                </telerik:RadRotator>

    div.localNewsArticleContainer
    {
        height: 150px;
        padding: 3px;
    }

    IE item issue
    <telerik:RadRotator ID="RadRotator1" runat="server" 
            DataSourceID="SqlDataSource2" Skin="Black" Width="308px" Height="94px" ItemWidth="308px" ItemHeight="94px"
            FrameDuration="8000" RotatorType="SlideShow" SlideShowAnimation-Type="Fade">
            <ItemTemplate>
                <div class="localWeatherRotatorBG">
                    <div class="left">
                        <div class="localWeatherRotatorTitle">
                            <asp:Label ID="lblDay" runat="server" Text='<%# Eval("DateFrom", "{0:dddd}") %>'></asp:Label>
                        </div>
                        <div class="localWeatherRotatorTime">kl: 
                            <asp:Label ID="lblTime" runat="server" Text='<%# Eval("DateFrom", "{0:HH:mm}") %>'></asp:Label>
                        </div>
                        <div class="localWeatherIcon">
                            <asp:Image ID="imgWeatherIcon" runat="server" ImageUrl='<%# Eval("SymbolID", "~/Custom/Controls/MpWeather/Images/{0}.png") %>'/>
                        </div>
                    </div>
                    <div class="middle">
                        <div class="localWeatherRotatorTemp">
                            <asp:Label ID="lblTemperature" runat="server" Text='<%# Eval("Temperature") %>'></asp:Label>
                            <asp:Label ID="Label2" runat="server" Text="°C"></asp:Label>
                        </div>
                        <div class="localWeatherRotatorWind">
                            <asp:Label ID="lblWindSpeed" runat="server" Text='<%# Eval("WindSpeed") %>'></asp:Label>
                            <asp:Label ID="Label3" runat="server" Text="m/s"></asp:Label>
                        </div>
                    </div>
                    <div class="right">
                        <div class="localWeatherRotatorDate">
                            <asp:Label ID="Label1" runat="server" Text='<%# Eval("DateFrom", "{0:d}") %>'></asp:Label>
                        </div>
                        <div class="localWeatherRotatorYrIcon">
                            <asp:Label ID="lblYr" runat="server" Text="Väder från ">
                                <asp:HyperLink ID="linkYr" runat="server" Target="_blank" ImageUrl="~/Custom/Controls/MpWeather/CSS/YR.png" NavigateUrl="http://www.yr.no"></asp:HyperLink>
                            </asp:Label>
                        </div>
                    </div>
                </div>
            </ItemTemplate>
        </telerik:RadRotator>
  2. Tsvetie
    Tsvetie avatar
    2 posts
    Registered:
    23 Nov 2016
    10 Feb 2011
    Link to this post
    Hi Johnny,
    I am not quite sure, why the height of the items changes to "300px" in this specific case and you are the first to report such a problem. Could you please check whether the incorrect height setting is applied server-side or as a result of the initialization scripts of the rotator? You can do this the following way:

    Using IE Developer toolbar, disable the scripts (Disable -> Script). Once you do this, the rotator will no longer appear on your page - this is expected, as the rotator shows after its initialization scripts are executed. However, you can still find the elements of the rotator in the HTML tab of the developer toolbar - just check the size that is applied to the LI elements and how this size is applied - e.g. inline style, external stylesheet, etc..

    Apart from this tip, there is nothing more that I can suggest without debugging the problem locally. Could you please open a new support ticket and send me a live URL, where I can reproduce the problem, together with detailed information on the steps I need to follow, in order to reproduce it?

    On a side note, the following is not a correct value for the CssClass property:
    <telerik:RadRotator ID="RadRotator1" runat="server"
                    DataSourceID="SqlDataSource1" ScrollDirection="Up" ScrollDuration="800" RotatorType="SlideShow"
                    SlideShowAnimation-Type="Fade" WrapFrames="true" Width="300px" Height="300px" ItemHeight="150px"
                    ItemWidth="300px" FrameDuration="10000" CssClass="~/Custom/Controls/MpNews/CSS/MpNews.css">

    You can read more about this property in MSDN - http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.webcontrol.cssclass.aspx.

    Regarding the problem in IE - I created a simple test page, based on the rotator definition that you have provided, but I was not able to reproduce the problem you describe - the result in IE and FF was the same. I have attached my test page for your reference. Could you please explain, which button you mean in the description of the problem? As you are using SlideShow rotator type, the rotator should not display any buttons.

    Regards,
    Tsvetie
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Johnny
    Johnny avatar
    45 posts
    Registered:
    08 Mar 2009
    14 Feb 2011
    Link to this post
    Hello Tsvetie!

    I´ve sorted the first problem with my rotator and item height. I think it was not really a ccs problem after all, but a "man behind the keyboard" problem. I had to manually go into every sitefinity page where I had my control and change the item height. My bad, sorry.

    However, I have not found a solution to my IE problem with the other rotator control. I´ve attached an image. Like I said before, when the page and the controls loads the first image looks as expected, but when the control rotates, the control pushes the image away slightly. With the IE developer tool it seems like there is some buttons, that are not visible, but seems to play a part after all.

    Any ideas?
  4. Tsvetie
    Tsvetie avatar
    2 posts
    Registered:
    23 Nov 2016
    16 Feb 2011
    Link to this post
    Hi Johnny,
    Yes, the buttons of the rotator render from the server, but in this case, we apply "display:none" to them. That is why, they do not influence the behavior of the control in any way. You can check this in our online demos: http://demos.telerik.com/aspnet-ajax/rotator/examples/default/defaultcs.aspx.

    You did not mention whether you were able to reproduce the problem with the page that I sent you. In case you cannot, it would be best if you modify it so that you can reproduce it and send it back to me as an attachment to a new support ticket.

    In the meantime, you could try removing all custom CSS that you have defined in the HEAD of your page or included by means of a reference to a separate style sheet. I noticed in the image that you sent, that you have a style sheet with a lot of global CSS selectors that apply style settings to the elements of the rotator as well. That is why, these could be the cause for the problem as well.

    Best wishes,
    Tsvetie
    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.
    Answered
Register for webinar
4 posts, 1 answered