Problem with Item Mouseover

[Steve]

Using a pretty simplistic RadRotator (v 2011.1.315.35), I have text-only items where you see one at a time, scrolling up.  Everything looks fine as the items rotate, but when I mouseover an item, the alignment of the item shifts up and bunches the text (if it happens to wrap).  What is the deal?  This was noticed in both IE8 and FF.

<telerik:RadRotator ID="radrotAlerts" runat="server" Skin="Hay" Width="650px" Height="50px" ItemWidth="650" ItemHeight="50"
    ScrollDirection="Up" ScrollDuration="1000" FrameDuration="3000" RotatorType="AutomaticAdvance">
    <ItemTemplate>
        <div style="width:650px; height:50px; vertical-align:middle; text-align:left;">
            <asp:Label ID="lblAlert" runat="server" Visible='<%# string.IsNullOrEmpty(Eval("AlertUrl").ToString()) ? true : false %>'>
                <%# Eval("AlertText") %>
            </asp:Label>
        </div>
    </ItemTemplate>
</telerik:RadRotator>

Attached are screenshots, one how it looks when mouse is NOT over item, one when it is.

[Niko]

Hi Steve,

This issue sounds like a case of CSS rules interfering with the appearance of the rotator items. Generally the mouseover and mouseout events of the rotator items would change neither the style of the elements, nor the CSS classes. This leads me to the conclusion that the problem may lie with the content of the rotator. Could you, please, provide a sample HTML content of the rotator items so that I can investigate this piece of code? Also, could you check if there are any additional DOM events attached to any of the elements of the item's content?
Please, find attached a sample project that simulates the behavior you are describing by changing the line-height of the content <div> tag.

Best wishes,
Niko
the Telerik team

[Steve]

The items are about as simple as it gets.  Here's the HTML rendered by the rotator.  Full disclosure: this is on a module control within a DNN site.:

<div id="dnn_ctr549_Details_radrotAlerts" class="RadRotator RadRotator_Hay" style="height:50px;width:650px;">
    <div class="rrRelativeWrapper">
        <div class="rrClipRegion">
            <ul class="rrItemsList">
                <li class="rrItem" style="height:50px;width:650px;">
                    <div id="dnn_ctr549_Details_radrotAlerts_i0">
                            <div style="width:650px; height:50px; vertical-align:middle; text-align:left;">
                                <span id="dnn_ctr549_Details_radrotAlerts_i0_lblAlert">alert test #2</span>
                            </div>
                    </div>
                </li>
                <li class="rrItem" style="height:50px;width:650px;">
                    <div id="dnn_ctr549_Details_radrotAlerts_i1">
                            <div style="width:650px; height:50px; vertical-align:middle; text-align:left;">
                                <span id="dnn_ctr549_Details_radrotAlerts_i1_lblAlert">My new alert to let you all know that campus will be closed this Friday.</span>
                            </div>
                    </div>
                </li>
            </ul>
        </div>
        <a class="rrButton rrButtonUp" href="javascript:void(0);"> </a>
        <a class="rrButton rrButtonLeft" href="javascript:void(0);"> </a>
        <a class="rrButton rrButtonRight" href="javascript:void(0);"> </a>
        <a class="rrButton rrButtonDown" href="javascript:void(0);"> </a>
    </div>
    <input id="dnn_ctr549_Details_radrotAlerts_ClientState" name="dnn_ctr549_Details_radrotAlerts_ClientState" type="hidden" />
</div>

[Niko]

Hello Steve,

Within the screen-shot you first sent there are two buttons that appear to be part of the rotator itself. However I didn't notice them being part of the rotator items. Please, try running the rotator without them and see the results. If they interfere in some way with the rotator it may be that they change the appearance of the rotator items through cascading any CSS rules to the content. Currently, the HTML that you provided appear completely correct.

Greetings,
Niko
the Telerik team

[Steve]

Sorry, the buttons were not part of the rotator.  Just sitting above (and outside) the control.

Like I said previously, this is being used inside a DotNetNuke site.  Any chance other CSS from somewhere in the site could be messing with the rotator?  If so, any way to resolve that (custom rotator style, etc.)?

[Niko]

Hello Steve,

It is very likely that other CSS resources interfere with the appearance of the rotator. These could be anything from theme styles to module styles. You could try and investigate it using any web developer tool of your liking. You best choice may be Firebug for Firefox as it displays the changes on CSS in real time (as they happen). Thus you can check what changes when you hover the rotator items.

If you could prepare a live URL, I could try helping you in the investigation.

All the best,
Niko
the Telerik team

[Piyushkumar]

Hi,

I have the latest Telerik version and face similar problem.
On IE 9.0 and IE 8.0, the extra Anchor Tags, increased the height.
This is the what the view-source looks like. I copied HTML from view-source and issue is replicated.

<div id="pnlNotificationCenter" style="width:100%;">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
  <td style="background-color: #840017;">
<a href="http://www.petpoint.com/help/release_advanced_utilities.htm" id="aNotificationCenterURL" style="font-size: 10pt !important;>
<div id="ctl00_radNotificationCenter" class="RadRotator RadRotator_Default" style="height:30px;width:700px;">
<!-- 2013.3.1015.40 -->
<div class="rrRelativeWrapper">
<div class="rrClipRegion">
<ul class="rrItemsList">
<li class="rrItem" style="height:30px;width:700px;">
<div id="ctl00_radNotificationCenter_i0">
Basic Licensing Enhancements and Advanced Licensing Release – June 17th, 2013
</div>
</li>
</ul>
</div>
<a class="rrButton rrButtonUp" href="javascript:void(0);">&nbsp;</a>
<a class="rrButton rrButtonLeft" href="javascript:void(0);">&nbsp;</a>
<a class="rrButton rrButtonRight" href="javascript:void(0);">&nbsp;</a>
<a class="rrButton rrButtonDown" href="javascript:void(0);">&nbsp;</a>
</div>
<input id="ctl00_radNotificationCenter_ClientState" name="ctl00_radNotificationCenter_ClientState" type="hidden" />
</div>
</a>
   </td>
   <td style="text-align: right; vertical-align: top; padding-right: 3px; width: 20px; height: 33px;">
<input type="image" name="ctl00$btnNotificationCenterClose" id="btnNotificationCenterClose" title="Close" src="../images/close_ico.jpg" />
   </td>
</tr>
</table>
</div>

If I remove the, extra Anchor Tags, it works fine.
I tried to hide it with CSS but doesn't help.

Is there a way, so that those extra (unwanted) Anchor tags are not generated ???

Thank you all who reply.

Piyush
 

[Slav]

Hello Piyushkumar,

If the RadRotator is properly configured, having these anchors should not break the functionality of the control. Please check this help article and ensure that control is configured according to the information inside.

If the problem persists after following the suggestions in the article, I would recommend sending a fully runnable sample that isolates the issue so that I can inspect it locally.

Regards,
Slav
Telerik