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

Root Image Borders

3 Answers 75 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 04 Oct 2010, 01:16 AM
Hello,

I've made a menu with a single root item that is just a small icon. I want it so that when people hover over the icon, they see the menu. The problem is that the skins put a border on the icon that I can't seem to get rid of... The border seems to be coming from the <ul> tag with the class rmRootGroup. I tried putting a reference to it in my own css file, but that didn't seem to work.

Any idea how I can get rid of that border on the top, but otherwise keep the rest of the skin working?

So, in short, I want the root item (the item with just the image) to basically have no border, while the child items keep the normal skin.

Thanks,

Mike

<telerik:RadMenu runat="server" ID="mnuSMS" BorderWidth="0px" onitemclick="mnuSMS_ItemClick">
    <Items>
        <telerik:RadMenuItem ImageUrl="../images/sms.png" BorderWidth="0px">
                                         
            <Items>
                <telerik:RadMenuItem Text="Thing 1"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Thing 2"></telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>

3 Answers, 1 is accepted

Sort by
0
Cori
Top achievements
Rank 2
answered on 04 Oct 2010, 03:42 PM
Hello Mike,

The border issue, I'm assuming, is more related to the fact that the image is enclosed inside of an a element. Trying setting BorderStyle="None" as well with BorderWidth="0". If that doesn help, create a css class that removes the border on the img tag and add it to the menu item. Like so:

.removeBorder img
{
   border: none 0;
}
  
<telerik:RadMenuItem ImageUrl="../image.jpg" CssClass="removeBorder">

I hope that helps.
0
Mike
Top achievements
Rank 1
answered on 04 Oct 2010, 03:54 PM
Thanks for the idea...

Unfortunately - no luck there... I've played around with doing that kind of thing elsewhere, but that doesn't hit the right level.

Here's the example output code from the making a skin help page... That kind of thing (or doing "outercssclass") impacts the <a> or <li> tags - but the border here is coming from the <ul> tag. I can't seem to find a way to set a css class for the <ul> tag.

<div id="RadMenu1"  class="RadMenu RadMenu_Green ">
 <ul class="rmHorizontal rmRootGroup">
   <li class="rmItem rmFirst">
     <a href="#" class="rmLink ">
       <span class="rmText">File</span>
     </a>
     <div class="rmSlide">

Thanks,

Mike
0
Accepted
Yana
Telerik team
answered on 06 Oct 2010, 08:29 AM
Hi Mike,
 
You are right - the border is set to the <ul> element. You can set CssClass property to the whole menu:

<telerik:RadMenu runat="server" ID="mnuSMS"  CssClass="noBorderMenu">

and add the following css:

div.noBorderMenu .rmRootGroup {
   border: none;
}

or you can set directly the style to "RadMenu" css class - in this way it will affect all the menus on the page:

div.RadMenu .rmRootGroup {
    border: none;
}


Kind regards,
Yana
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Menu
Asked by
Mike
Top achievements
Rank 1
Answers by
Cori
Top achievements
Rank 2
Mike
Top achievements
Rank 1
Yana
Telerik team
Share this question
or