Right-Align more than one RadMenuItem?

3 posts, 0 answers
  1. Chris
    Chris avatar
    8 posts
    Member since:
    Jan 2012

    Posted 12 Feb 2013 Link to this post

    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. Boyan Dimitrov
    Boyan Dimitrov avatar
    2051 posts

    Posted 15 Feb 2013 Link to this post


    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">
            <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>
    //css style
    <style type="text/css">
        div.RadMenu .rmRootGroup .customClass,
        div.RadMenu .rmRootGroup .rmLast {
        div.RadMenu .rmGroup .customClass,
        div.RadMenu .rmGroup     .rmLast {

    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.

    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.
  3. Aaron Abdis
    Aaron Abdis avatar
    26 posts
    Member since:
    Mar 2005

    Posted 30 Jul 2014 Link to this post

    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.
Back to Top