Problem with Item Mouseover

8 posts, 0 answers
  1. Steve
    Steve avatar
    60 posts
    Member since:
    Nov 2006

    Posted 11 Apr 2011 Link to this post

    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.
  2. Niko
    Admin
    Niko avatar
    387 posts

    Posted 13 Apr 2011 Link to this post

    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.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Steve
    Steve avatar
    60 posts
    Member since:
    Nov 2006

    Posted 14 Apr 2011 Link to this post

    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>
  5. Niko
    Admin
    Niko avatar
    387 posts

    Posted 15 Apr 2011 Link to this post

    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.

  6. Steve
    Steve avatar
    60 posts
    Member since:
    Nov 2006

    Posted 15 Apr 2011 Link to this post

    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.)?
  7. Niko
    Admin
    Niko avatar
    387 posts

    Posted 18 Apr 2011 Link to this post

    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.

  8. Piyushkumar
    Piyushkumar avatar
    25 posts
    Member since:
    Nov 2010

    Posted 04 Nov 2013 Link to this post

    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
     
  9. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 07 Nov 2013 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017