Right-Align more than one RadMenuItem?

[Chris]

Hopefully this is an easy one..I am familiar with the CSS trick to right-align the last RadMenuItem for a RadMenu that is 100% wide:

div.RadMenu .rmRootGroup .rmLast   { float: right; }
div.RadMenu .rmGroup     .rmLast   { float: none;  }

However, for a particular client, I need to have TWO (theoretically more but two for now) RadMenuItems right-aligned.. I cannot seem to figure out how to do this. The closest I could get was to have separate RadMenus contained within their own DIV (one float:left, one float:right). This put everything in the correct positions but left a whitespace gap in the middle that I could not seem to fill (not to mention borders on the edges that I couldn't get rid of even when using the tricks found in this forum..

So in short, is there a way to do this sort of like how tables do it (conceptually.. I know we all hate tables) where I could set my RadMenu to 100% width, set the first 4-5 RadMenuItems on the left to a fixed width, then somehow declare a separator item or such that would automatically fill up whatever is left over by the left items and the two that I would add after it?

I feel like I am missing something very easy but for the life of me I can't figure this one out.

[Boyan Dimitrov]

Hello,

I would suggest applying a custom class name to that list items that contains your RadMenuItems and style that specific class. An easy and convenient way of achieving such functionality you may find in the code snippet below:
//markup code

<telerik:RadMenu ID="RadMenu2" runat="server">
    <Items>
        <telerik:RadMenuItem Text="Item 1"></telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Item 2"></telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Item 3" OuterCssClass="customClass"></telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Item 4"></telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>

//css style

<style type="text/css">
    div.RadMenu .rmRootGroup .customClass,
    div.RadMenu .rmRootGroup .rmLast {
         background-color:red;
    }

    div.RadMenu .rmGroup .customClass,
    div.RadMenu .rmGroup     .rmLast {
       background-color:red;
    }
</style>

This code snippet will apply red background color to your last item and the one that has class name "customClass".

Hope that this will be helpful.

Regards,
Boyan Dimitrov
the Telerik team

[Aaron Abdis]

That worked beautifully! Thank you! The OuterCssClass property was key.

I have a CSS class:

floatri { float: right !important; }

and I apply that to the items' OuterCssClass that I want to the right, and it works like a charm.
Thanks!