.rmFirst .rmLast CSS selector specific for single submenuitem?

4 posts, 1 answers
  1. Skywalker
    Skywalker avatar
    67 posts
    Member since:
    Sep 2007

    Posted 03 Dec 2008 Link to this post

    Hi,

    This is the situation:

    - I have a RadMenu with root menuitems and a single level of submenuitems (just as in this demo).
    - the submenuitems have been styled using background images (using the skin's CSS file). Specifically, the .rmLink together with .rmFirst and .rmLast have been defined to use the correct images.

    However, I run into a problem when there is only 1 submenuitem: the LI tag contains both .rmFirst and .rmLast, and the image defined in .rmLast is displayed. What I need is a way to set the background image using a CSS selector, so that I can use a image that is designed for a single submenuitem (the submenu's design  contains fancy rounded corners and fancy borders that cannot be created using CSS alone).

    Unless it's possible to make a CSS selector based on two CSS classes in an element (i.e. <li class="rmFirst rmLast"></li>), I think the best solution would be two introduce a new CSS class, perhaps ".rmFirstLast"?

    That way I could define the .rmFirstLast class in the Skin's stylesheet and use the correct image.
    I hope I'm making any sense, otherwise I will provide visuals to make my point clear.

    A Telerik Demo of RadMenu contains a sample to demonstrate my problem: http://demos.telerik.com/aspnet-ajax/Menu/Examples/Default/DefaultCS.aspx

    If the submenu of "File" contained only a single item, you would see that the top border of the item is missing.
  2. Answer
    Yana
    Admin
    Yana avatar
    4554 posts

    Posted 05 Dec 2008 Link to this post

    Hi Sipke,

    Here is a workaround of this issue:

     <telerik:RadMenu ID="RadMenu1" runat="server" Skin="Office2007Big"   
                EnableEmbeddedSkins="false">  
            <Items> 
                <telerik:RadMenuItem Text="File">  
                    <Items> 
                        <telerik:RadMenuItem Text="item 1" /> 
                        <telerik:RadMenuItem Text="&nbsp;" CssClass="bottom" /> 
                    </Items> 
                </telerik:RadMenuItem> 
            </items> 
     </telerik:RadMenu> 

    and add the css class "bottom" to Menu.Office2007Big.css file:

    .bottombottom {  
        background-position:0 -250px !important;  
        line-height:12px !important;  

    I hope this helps.

    Regards,
    Yana
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Skywalker
    Skywalker avatar
    67 posts
    Member since:
    Sep 2007

    Posted 07 Dec 2008 Link to this post

    Hi Yana,

    Thanks for the tip, I think it's a good solution.
    Another solution I came up with is introducing a new CSS class, .rmFirstLast, applied to the anchor.
    I then use an eventhandler for the DataBound event of the RadMenu control, iterating through each item. If an item is an only child, I apply the rmFirstLast class.

    A disadvantage is of course that I need to use code. An advantage is that I don't have to add an extra menuitem as in your solution. However in my case that is not really an issue... as long as it looks good, right? :)

    Anyway, thanks again!
  5. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 08 Dec 2008 Link to this post

    Hello Sipke,

    I'm glad I could help.

    Regards,
    Yana
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Back to Top