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

Right-Align more than one RadMenuItem?

2 Answers 87 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 12 Feb 2013, 10:47 AM
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.

2 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 15 Feb 2013, 08:47 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Aaron Abdis
Top achievements
Rank 1
answered on 30 Jul 2014, 03:50 PM
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!
Tags
Menu
Asked by
Chris
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Aaron Abdis
Top achievements
Rank 1
Share this question
or