Icon only menu items mouseover never lines up.

6 posts, 0 answers
  1. Sam Tran
    Sam Tran avatar
    83 posts
    Member since:
    Nov 2006

    Posted 13 Aug 2013 Link to this post

    Hi,

    I'm using RadMenu both in LTR and RTL directions.  In both menus, I have some menuitems that have text only, some that have text and icon, and some that are icon only.

    In none of the themes does the mouseover line up correctly for the icon only menu items.
    It is tolerable in some themes, but on other themes like Silk and Glow it looks horrible.

    If you use the sample code below and play with having nothing in the text property of the items or an non-breaking space, you see it work differently and looks really messed up.

    Note that I picked a random image off an icon site.  If it doesn't work, substitute any 16x16 image.

    Bottom line is that I need a way to make sure that the mouseover on icon only menuitems line up properly under the icon.
    <div>
        <telerik:RadMenu ID="RadMenuRTL" runat="server" Width="100%" RegisterWithScriptManager="true" Skin="Silk"
            dir="rtl" ClickToOpen="true" Flow="Horizontal">
            <Items>
                <telerik:RadMenuItem Text="" Value="1" ImageUrl="https://cdn1.iconfinder.com/data/icons/fatcow/16/clock_edit.png"
                    ToolTip="Tip">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="" Value="2" ImageUrl="https://cdn1.iconfinder.com/data/icons/fatcow/16/clock_edit.png"
                    ToolTip="Tip">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="With Text" Value="3" ImageUrl="https://cdn1.iconfinder.com/data/icons/fatcow/16/clock_edit.png"
                    ToolTip="Tip">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="" Value="4" ImageUrl="https://cdn1.iconfinder.com/data/icons/fatcow/16/clock_edit.png"
                    ToolTip="Tip">
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>
        <telerik:RadMenu ID="RadMenu1" runat="server" Width="100%" RegisterWithScriptManager="true" Skin="Silk"
            ClickToOpen="true" Flow="Horizontal">
            <Items>
                <telerik:RadMenuItem Text="" Value="1" ImageUrl="https://cdn1.iconfinder.com/data/icons/fatcow/16/clock_edit.png"
                    ToolTip="Tip">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="With Text" Value="2" ImageUrl="https://cdn1.iconfinder.com/data/icons/fatcow/16/clock_edit.png"
                    ToolTip="Tip">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="" Value="3" ImageUrl="https://cdn1.iconfinder.com/data/icons/fatcow/16/clock_edit.png"
                    ToolTip="Tip">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="" Value="4" ImageUrl="https://cdn1.iconfinder.com/data/icons/fatcow/16/clock_edit.png"
                    ToolTip="Tip">
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>
     
    </div>
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 14 Aug 2013 Link to this post

    Hi Sam Tran,

    Please try the following CSS.

    CSS:
    <style type="text/css">
        .RadMenu a.rmImageOnly img.rmLeftImage , .RadMenu .rmRootGroup a.rmImageOnly
        {
            margin-top: 5px !important;
        }
    </style>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sam Tran
    Sam Tran avatar
    83 posts
    Member since:
    Nov 2006

    Posted 14 Aug 2013 Link to this post

    Thanks for the reply Shinu, but that actually makes it worse.
    It fixes the top mis-alignment when the menu loads and there is no mouseover occurring, but hovering over different menu items gives crazy results.
    I've tried playing with different margin and padding CSS but nothing really works.
  5. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 15 Aug 2013 Link to this post

    Hi Sam,

    Actually this is an issue of the RadMenu and I have logged it for fixing. We will make our best to fix it as soon as possible.


    Please, apply the following CSS workaround for preliminary solving the problem

    html .RadMenu_Silk a.rmImageOnly img.rmLeftImage {
        margin: 10px 10px 8px 9px;
    }
    html .RadMenu_Silk a.rmImageOnly:hover img.rmLeftImage {
        margin-bottom: 12px;
    }
    html .RadMenu_Silk.RadMenu_rtl .rmRootLink img {
        margin-left: -8px;
        margin-right: 5px;
    }

    Note: The solution is working only for Silk skin. Regards,
    Magdalena
    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.
  6. Egil
    Egil avatar
    1 posts
    Member since:
    Nov 2008

    Posted 02 Jan 2014 Link to this post

    Hi.

    For anyone interested in this still (issue still not fixed as far as I can see...)

    .RadMenu .rmRootLink .rmLeftImage {
        margin-top: 11px !important;
    }
    .RadMenu .rmRootLink:hover .rmLeftImage {
        margin-top: 7px !important;
    }
    .RadMenu .rmRootLink.rmFocused .rmLeftImage {
        margin-top: 7px !important;
    }

    Confirmed to work with both Silk and Glow skins....  (the extra pixel alignment just made it a little bit better when using 16x16 icons and texts..)  :)
  7. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 06 Jan 2014 Link to this post

    Hello Egil,

    Thank you for your feedback. We will review the issue and will increase its priority if it is still not fixed with the latest version of the Telerik controls.

    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