.rmFirst .rmLast CSS selector specific for single submenuitem?

[Skywalker]

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.

[Yana]

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.

[Skywalker]

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!

[Yana]

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.