Center a single menu item

[Jon]

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;

[Kamen Bundev]

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.

[Jon]

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... ???

[Kamen Bundev]

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.

[Jon]

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>

 

[Jon]

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>

[Shinu]

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-align: center !Important;
   background-color: red;
}
</style>

Thanks,
Shinu.

[Kamen Bundev]

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.

[Jon]

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>

 

[Jon]

It appears I'm using the embedded Skin.. Does that matter ?  thanks

[Kamen Bundev]

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-align: left !important;
}

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

Best wishes,
Kamen Bundev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Jon]

Thanks!  That worked... finally

[desarrollo_cer]

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

[Kate]

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