Center a single menu item

14 posts, 0 answers
  1. Jon
    Jon avatar
    539 posts
    Member since:
    Apr 2004

    Posted 08 Dec 2008 Link to this post

    Hi..
    All the  the text and images of my items on my menu are left aligned - How can I  center the text of a single item?  Thanks


    RadMenuItem

     

    NewItem = new RadMenuItem();

     

     

    this.RadMenu.Items.Add(NewItem);

     

    NewItem.ForeColor = System.Drawing.

    Color.Blue;

     

    NewItem.Text = ((

    Admin.OfficeCodeDataTable)Session["Office_Table"])[0].SenatorElect;

     

    NewItem.ToolTip = NewItem.Text;

    NewItem.Width = 375;

  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 08 Dec 2008 Link to this post

    Hello Jon,

    To alter most aspects of the visual appearance of a single menu item (or any element), you can use its property CssClass to assign a specific CSS class to it. More information on this property usage you can find in the documentation article about it here:

    http://www.telerik.com/help/aspnet-ajax/menu_appearancecssclassofitems.html

    Let me know if the proposed solution helps.

    Greetings,
    Kamen Bundev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jon
    Jon avatar
    539 posts
    Member since:
    Apr 2004

    Posted 08 Dec 2008 Link to this post

    I tried this...

     

    .MenuItemCenter {

     

     

    text-align: center !important;

     

    }

     



     

    RadMenuItem NewItem = new RadMenuItem();

     

    NewItem.CssClass =

    "MenuItemCenter";

     

     

    this.RadMenu.Items.Add(NewItem);

     

    NewItem.ForeColor = System.Drawing.

    Color.Blue;

     

    NewItem.Text = ((

    Admin.OfficeCodeDataTable)Session["Office_Table"])[0].SenatorElect;

     

    NewItem.ToolTip = NewItem.Text;

    NewItem.Width = 375;


    but it does not work... ???

  5. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 09 Dec 2008 Link to this post

    Hi Jon,

    Just tried it too and it works for me. Are you sure your class is placed in a CSS file or in a <style> tag?

    Sincerely yours,
    Kamen Bundev, Team 3
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Jon
    Jon avatar
    539 posts
    Member since:
    Apr 2004

    Posted 09 Dec 2008 Link to this post

    I have the following.. what's wrong? Thanks

    <!-- MENU ALIGNMENT -->

     

     

    <

     

    style type="text/css">

     

     

    .rmText {

     

     

    text-align: left !important;

     

    }

     

     

    .MenuItemCenter {

     

     

    text-align: center !important;

     

     

    background-color: red;

     

     

    }

     

    </

     

    style>

     

  7. Jon
    Jon avatar
    539 posts
    Member since:
    Apr 2004

    Posted 09 Dec 2008 Link to this post

    Look how it gets rendered....   That's why it doesn't work.. thanks

    <a href="#" title="Test2" class="rmLink MenuItemCenter" style="color:Blue;"><span class="rmText">Test2</span></a></li>
  8. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 10 Dec 2008 Link to this post

    Hi Jon,

    By default the text of RadMenuItems are left aligned. Can you remove the CSS for rmText and check whether it is working for you.

    CSS:
    <style type="text/css"
       .MenuItemCenter1 { 
       text-aligncenter !Important; 
       background-colorred
    </style> 

    Thanks,
    Shinu.
  9. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 10 Dec 2008 Link to this post

    Hi Jon,

    You have an important .rmText class which overrides the .MenuItemCenter applied to the link around the text, try to remove the whole .rmText class or only the !important part and see if it works.

    Sincerely yours,
    Kamen Bundev, Team 3
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  10. Jon
    Jon avatar
    539 posts
    Member since:
    Apr 2004

    Posted 10 Dec 2008 Link to this post

    If I remove it some my menuitems are still Centered! 

    All these are still centered..... Help.. thanks

     

    </telerik:RadMenuItem>

     

     

    <telerik:RadMenuItem runat="server" Text="Searching &amp; Reporting" Font-Size="Larger"

     

     

    ImageUrl="img\find.png" ToolTip="Searching &amp; Reporting" Value="SearchReporting">

     

     

    <Items>

     

     

    <telerik:RadMenuItem runat="server" Text="Basic Search"

     

     

    ImageUrl="img\find_text.png" Value="wfBasicSearch.aspx">

     

     

    </telerik:RadMenuItem>

     

     

    <telerik:RadMenuItem runat="server" Text="Advanced Search"

     

     

    ImageUrl="img\find_text.png" value="wfAdvancedSearch.aspx">

     

     

    </telerik:RadMenuItem>

     

     

    <telerik:RadMenuItem runat="server" ImageUrl="img\reportsSmall.png"

     

     

    Text="Reports" Value="wfCannedReports.aspx">

     

     

    </telerik:RadMenuItem>

     

     

    <telerik:RadMenuItem runat="server" ImageUrl="img\mail_find.png"

     

     

    Text="Hidden Communications" Value="HiddenCorrespondence.aspx">

     

     

    </telerik:RadMenuItem>

     

     

    </Items>

     

     

    </telerik:RadMenuItem>

     

  11. Jon
    Jon avatar
    539 posts
    Member since:
    Apr 2004

    Posted 10 Dec 2008 Link to this post

    It appears I'm using the embedded Skin.. Does that matter ?  thanks
  12. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 11 Dec 2008 Link to this post

    Hi Jon,

    If some of your items are centered, you can try to keep the .rmText class and change the selector for .MenuItemCenter to override the important .rmText class like in the following example.

    .RadMenu .rmText { 
        text-alignleft !important; 
     
    .RadMenu .MenuItemCenter .rmText { 
        text-aligncenter !important; 

    Best wishes,
    Kamen Bundev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  13. Jon
    Jon avatar
    539 posts
    Member since:
    Apr 2004

    Posted 11 Dec 2008 Link to this post

    Thanks!  That worked... finally
  14. desarrollo_cer
    desarrollo_cer avatar
    2 posts
    Member since:
    Jul 2012

    Posted 04 Apr 2013 Link to this post

    hi it works in IE but in firefox the aligment is still in the center and i put this code

    .RadMenu .rmText {
        text-align: left !important;
    }
     
    .RadMenu .MenuItemCenter .rmText {
        text-align: left !important;
    }


    can you help me  telling me if there is anything else that i have to do to meke this works in firefox

    thanks in advance

  15. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 18 Apr 2013 Link to this post

    Hi Javier,

    Attached to this post you can find a very simplified runnable page demonstrating how to center a single menu item. For more information on the different css classes that I used I would suggest that you refer to this help article.

    Kind regards,
    Kate
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017