RadRotator IE 7 problem

[rajeev khan]

Hi Telerik,
We have a problem in the RadRotator(its not displaying in IE 7 but working fine in IE 8,Mozilla etc..).
I have attached code snippet and Images which has IE7 problem.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="QPRotator.ascx.cs" Inherits="Sitefinity_UserControls_QPRotator" %>
<%@ Register TagPrefix="rad" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %>

<script type="text/javascript">
    function moveUp()
    {
        var radrot= '<%=radRotator.ClientID%>';
        $find(radrot).showNext(Telerik.Web.UI.RotatorScrollDirection.Up);
    }
    function moveDown()
    {
        var radrot= '<%=radRotator.ClientID%>';
        $find(radrot).showNext(Telerik.Web.UI.RotatorScrollDirection.Down);
    }

</script>

<table width="219" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td height="38.2px" class="qpHeader" style="padding-left: 17px;">
            <asp:Label ID="lblTitle" runat="server"></asp:Label>
        </td>
        <td class="qpHeader">
            <div class="floatLeftRight">
                <div class="rotaterUparrow">
                    <asp:Image runat="server" ID="img_UP" ImageUrl="~/Images/QP_up_arrow.png" onclick="moveUp();" /></div>
                <div class="rotaterDownarrow">
                    <asp:Image runat="server" ID="img_Down" ImageUrl="~/Images/QP_down_arrow.png" onclick="moveDown();" /></div>
            </div>
        </td>
    </tr>
</table>
<div class="rotaterContainer">
    <rad:RadRotator ID="radRotator" runat="server" Height="267px" Width="219px" ScrollDuration="500"
        RotatorType="Buttons" WrapFrames="true" ItemHeight="89px" ItemWidth="219px" OnItemDataBound="radRotator_ItemDataBound"
        ScrollDirection="Down" RegisterWithScriptManager="false">
        <ControlButtons UpButtonID="img_Down" DownButtonID="img_UP" />
        <ItemTemplate>
            <div class="qpProjectsbg">
                <div class="rotaterImageContainer">
                    <asp:Image ID="Thumbnail" runat="server" />
                </div>
                <div class="qpProjectText">
                    <asp:HyperLink ID="hlNavigator" runat="server">
                        <asp:Literal ID="lblName" runat="server"></asp:Literal>
                    </asp:HyperLink>
                </div>
            </div>
        </ItemTemplate>
    </rad:RadRotator>
</div>

[Pero]

Hello Rajeev,

This issue seems to be occurring under IE6 and IE7, when the rotator is in RTL mode. To overcome the issue set the following CSS in the <head/> of the page where the rotator is residing:

<style type="text/css">
    *+html .rrItemsList
    {
        float: none !important;
    }
    *html .rrItemsList
    {
        float: none !important;
    }
</style>

 
If the problem persists, please send the full CSS code you are applying to the page.

Best wishes,
Pero
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.

[mamad]

hi ,
i have a problem with rad rotator in IE7 and IE6
when add your css that write top , to my index page fixed my problem with 1 rotator that type is "slideshow"
but i have many rotator in my page that other rotator has until  problem with ie7
other rotator type are "fromcode" and "autoadvance"
please help me to resolve this problerm
i have just problem with radrotator controls in my web site page

at last i add that my page direction is "RTL"
 

[Fiko]

Hello Mamad,

 In the provided code I see that the ItemWidth and ItemHeight properties of the RadRotator control are not set. Please note that these properties are important in order to ensure consistent behavior of the control in different browsers. Also their values are used in order to determine the items size. This is why I strongly recommend you to set the aforementioned properties based on the described in this KB article.

The RadRotator control does not support RTL scenarios but you can easily  overcome this limitation by using this approach:

• add the following CSS class in the head tag :
  
  Copy Code

  <style type="text/css">
      .RadRotator
      {
          direction: ltr;
      }
  </style>

  this code explicitly sets the LTR direction only to the RadRotators declared on the page.
  
• implement the RadRotator's ItemTemplate as follows :
  
  Copy Code

  <ItemTemplate>
      <div dir="rtl">
          <%-- The content of the ItemTemplate --%>
      </div>
  </ItemTemplate>

  The highlighted div is used in order to set the RTL behavior of the RadRotator's items.

Could you please apply the described steps in your project and let us know the result. In case that the problem still exists, please open a new support ticket and send us a runnable project that reproduces the problem. Once we have a closer look over your setup and the problem within we will be able to determine the source of the undesired behavior an hopefully provide a solution.

I hope this helps.

Kind regards,
Fiko
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.

[mamad]

thank's alot ADMIN
my problem solved by this CSS code that you send :

<style type="text/css">
    .RadRotator
    {
        direction: ltr;
    }
</style>

i like telerik product and telerik support .

[K]

I am having the issue while using RadRotator with IE 7 in IE 8 and mozila Its working fine

<telerik:RadRotator ID="BlogRadRotator" ScrollDirection="Up" runat="server"
    Height="160px" Width="300px" RotatorType="AutomaticAdvance"   ScrollDuration="2000" FrameDuration="1">
    <ItemTemplate>
 
                <div class="labelLeft">
                    <a href="ViewBlogDetails.aspx?BlogID=<%#Eval("BlogID")%>">
                        <asp:Label ID="lblUserName" CssClass="timeText" runat="server" Text='<%#Eval("UserName") %>'></asp:Label></a>
                    <asp:Label ID="lbldatetime" CssClass="dateText" runat="server" Text='<%#Eval("DateCreated") %>'></asp:Label>
                </div>
                <div class="right1Text">
                    <span>
                        <asp:Label ID="lblBlog" runat="server" Text='<%#Eval("BlogTitle") %>'></asp:Label></span>
                </div>        
            <div class="cls"> </div>    
    </ItemTemplate>
</telerik:RadRotator>

[Fiko]

Hello K,

The problem comes from the fact that the ItemWidth and ItemHeight properties are not specified. Could you please set them based on the instructions provided in this help article? Then you should not experience the same problem.

Greetings,
Fiko
the Telerik team