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

.rmFirst .rmLast CSS selector specific for single submenuitem?

3 Answers 63 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Skywalker
Top achievements
Rank 1
Skywalker asked on 03 Dec 2008, 09:50 PM
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.

3 Answers, 1 is accepted

Sort by
0
Accepted
Yana
Telerik team
answered on 05 Dec 2008, 02:34 PM
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.
0
Skywalker
Top achievements
Rank 1
answered on 07 Dec 2008, 02:48 PM
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!
0
Yana
Telerik team
answered on 08 Dec 2008, 02:08 PM
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.
Tags
Menu
Asked by
Skywalker
Top achievements
Rank 1
Answers by
Yana
Telerik team
Skywalker
Top achievements
Rank 1
Share this question
or