This is a migrated thread and some comments may be shown as answers.

Problem with Item Mouseover

7 Answers 47 Views
Rotator
This is a migrated thread and some comments may be shown as answers.
Steve
Top achievements
Rank 2
Steve asked on 11 Apr 2011, 09:24 PM
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.

7 Answers, 1 is accepted

Sort by
0
Niko
Telerik team
answered on 13 Apr 2011, 01:39 PM
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

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.

0
Steve
Top achievements
Rank 2
answered on 14 Apr 2011, 07:11 PM
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>
0
Niko
Telerik team
answered on 15 Apr 2011, 11:08 AM
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

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.

0
Steve
Top achievements
Rank 2
answered on 15 Apr 2011, 05:43 PM
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.)?
0
Niko
Telerik team
answered on 18 Apr 2011, 12:33 PM
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

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.

0
Piyushkumar
Top achievements
Rank 1
answered on 04 Nov 2013, 03:29 PM
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
 
0
Slav
Telerik team
answered on 07 Nov 2013, 01:40 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Rotator
Asked by
Steve
Top achievements
Rank 2
Answers by
Niko
Telerik team
Steve
Top achievements
Rank 2
Piyushkumar
Top achievements
Rank 1
Slav
Telerik team
Share this question
or