Root Image Borders

4 posts, 1 answers
  1. Mike
    Mike avatar
    59 posts
    Member since:
    Jan 2008

    Posted 03 Oct 2010 Link to this post

    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>
  2. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 04 Oct 2010 Link to this post

    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.
  3. Mike
    Mike avatar
    59 posts
    Member since:
    Jan 2008

    Posted 04 Oct 2010 Link to this post

    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
  4. Answer
    Yana
    Admin
    Yana avatar
    5044 posts

    Posted 06 Oct 2010 Link to this post

    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
Back to Top