Icon only menu items mouseover never lines up.

[Sam]

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>

[Shinu]

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.

[Sam]

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.

[Magdalena]

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

[Egil]

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..)  :)

[Kate]

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