RadMenu root image not beeing completely selected on hover

8 posts, 0 answers
  1. Louis
    Louis avatar
    3 posts
    Member since:
    Nov 2007

    Posted 26 Jul 2011 Link to this post

    Hello

    Im trying to make the whole image react when the mouse hover on the root menu item, but it actually just take the first 24 pixels of the image or so

    here is a sample

    <%@ Page Language="VB" AutoEventWireup="false" CodeBehind="TelerikWebForm.aspx.vb" Inherits="WebApplication2.TelerikWebForm" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <%--Needed for JavaScript IntelliSense in VS2010--%>
                <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
            //Put your JavaScript code here.
        </script>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <div>
        <telerik:RadMenu runat="server">
        <Items>
        <telerik:RadMenuItem Text="" ImageUrl="GDGlobal-95x25.png" Width="95px">
        </telerik:RadMenuItem>
        </Items>
        </telerik:RadMenu>
        </div>
        </form>
    </body>
    </html>

    Any idea what I'm doing wrong?

    Thanks
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 28 Jul 2011 Link to this post

    Hello Louis,

    The code that you have provided seems correct and I can not see any reason why the image takes only 24px and not the size of the image. I also attached the page that I used to test your issue. Please take a look at it and let me know if this helps.

    All the best,
    Kate
    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. Louis
    Louis avatar
    3 posts
    Member since:
    Nov 2007

    Posted 28 Jul 2011 Link to this post

    Hello

    thanks for your response, your example works exactly like mine, look at the attach image, this is when the mouse is hover the first menu item icon, why isn't the entire icon image on a full orange background, not just the first 24 pixel of it, when can see that it creates an underline with the proper length, but not the background...

    Thanks
  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 03 Aug 2011 Link to this post

    Hello Louis,

    Thanks for the image, it gave us a clear idea of the appearance that you described. This is a bug of the Outlook skin of the RadMenu. Thank you for reporting it. I also updated your Telerik points. 

    Kind regards,
    Kate
    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. Nekud
    Nekud avatar
    4 posts
    Member since:
    May 2013

    Posted 05 Nov 2013 Link to this post

    Has this issue been solved yet? If so, where can I find the solution?

    Thanks,
    Nekud
  7. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 07 Nov 2013 Link to this post

    Hello Nuked,

    The issue that is described here is expected to occur when a larger image is applied to the items and no text is set. It is not a bug of the control but it is rather caused due to the current rendering. To have it working as expected you can use the following css class selector:

    .rmItem {
                width: auto !important;
            }
            .rmLink:hover img,
            .rmSelected img {
                background-image: url( rmSprite.png );
                background-position: 100% -96px;
            }
            .rmExpanded img,
            .rmExpanded:hover img {
                background-image: url( rmSprite.png );
                background-position: 100% -144px;
            }
                 
            html .RadMenu a.rmImageOnly .rmLeftImage {
                padding-right: 12px;
            }
            html .RadMenu .rmRootGroup a.rmImageOnly {
                height: 23px;
                padding-left: 12px;
            }

    Regards,
    Kate
    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.
  8. Nekud
    Nekud avatar
    4 posts
    Member since:
    May 2013

    Posted 08 Nov 2013 Link to this post

    Hi Kate,

    Thank you for the reply. I'm sorry I did not post my specific requirements with the menu and the image. Here is a brief description:

    I have small images 24 x 24 on the left and Text on the right. I have used the Telerik Radmenu skin - Web20. By default, the menu text lays on the top (please see attached filename-DefaultMenuSelection) parallel to the top of the image. But I want the text to be aligned parallel to the bottom of the image (please see attached filename - MenuImageSelectionIssue). I achieve this behavior by adding the following :

     

     

    .rmText
             
                font-size: small !important
                cursor: hand !important;
                margin-top:7px;
                margin-left: 15px;
             }

     

    But when I do that and hover over the menu, The selection for text and image becomes segregated which I don't want. So how can I make it consistent? Also, the cursor hand holds only true for text and not for the picture. How can I make it hand for the whole radmenuItem?

    Thanks,
    Nekud

     

     

     

             

  9. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 12 Nov 2013 Link to this post

    Hello Nekud,

    The issue that you experience is caused due to the fact that the 24x24pixels image set a different height to the RadMenu. For this reason I would suggest that you refer to the following help article where you can get more information on how to alter the height of the control -  How to change height of RadMenu.

    Regards,
    Kate
    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