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

Icon only menu items mouseover never lines up.

5 Answers 40 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Sam Tran
Top achievements
Rank 1
Sam Tran asked on 13 Aug 2013, 02:33 PM
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>

5 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 14 Aug 2013, 05:52 AM
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.
0
Sam Tran
Top achievements
Rank 1
answered on 14 Aug 2013, 11:57 AM
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.
0
Magdalena
Telerik team
answered on 15 Aug 2013, 10:24 AM
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.
0
Egil
Top achievements
Rank 1
answered on 02 Jan 2014, 07:09 PM
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..)  :)
0
Kate
Telerik team
answered on 06 Jan 2014, 10:33 AM
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.
Tags
Menu
Asked by
Sam Tran
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Sam Tran
Top achievements
Rank 1
Magdalena
Telerik team
Egil
Top achievements
Rank 1
Kate
Telerik team
Share this question
or