I'd like to evenly space the root menu items. I've created a custom skin by copying the Menu.default.css and attempting to modify it but any combination of .RadMenu_x .rmRootGroup .rmItem seem to grab all the items in the menu and I only want to do this to the first row in the menu.
Here's what I'm working on. There's an old ASP.NET menu above where I'm sticking the RadMenu - you can see that is is evenly spaced menuitems. Image here.
Here's what I'm working on. There's an old ASP.NET menu above where I'm sticking the RadMenu - you can see that is is evenly spaced menuitems. Image here.
3 Answers, 1 is accepted
0
Schlurk
Top achievements
Rank 2
Rank 2
answered on 05 Mar 2010, 07:17 PM
I've done the following to evenly space out four items across my RadMenu, perhaps this'll work for you :)
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head runat="server"> |
| <title></title> |
| <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" /> |
| <style type="text/css"> |
| div.RadMenu .rmItem |
| { |
| padding: 0; |
| } |
| div.RadMenu .rmLink, |
| div.RadMenu .rmText |
| { |
| float: none; |
| text-align: center; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> |
| <Scripts> |
| <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> |
| <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> |
| </Scripts> |
| </telerik:RadScriptManager> |
| <telerik:RadMenu ID="RadMenu1" runat="server" Skin="Forest" Width="100%" Flow="Horizontal"> |
| <Items> |
| <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1" Width="25%"> |
| </telerik:RadMenuItem> |
| <telerik:RadMenuItem runat="server" Text="Root RadMenuItem2" Width="25%"> |
| </telerik:RadMenuItem> |
| <telerik:RadMenuItem runat="server" Text="Root RadMenuItem3" Width="25%"> |
| </telerik:RadMenuItem> |
| <telerik:RadMenuItem runat="server" Text="Root RadMenuItem4" Width="25%"> |
| </telerik:RadMenuItem> |
| </Items> |
| </telerik:RadMenu> |
| </form> |
| </body> |
| </html> |
0
Rick Glos
Top achievements
Rank 1
Rank 1
answered on 08 Mar 2010, 06:27 PM
Yes I'm trying to each that same effect, but I don't have access to the items, and therefore the width property on the RadMenuItem object, because I'm binding directly to a SiteMapDataSource.
How do I grab just the first group, the rmRootGroup, without grabbing all the children is what I can't seem to figure out via CSS.
| <div> |
| <telerik:RadMenu ID="WebsiteRadMenu" Runat="server" DataSourceID="SiteMapDataSourceMenu" EnableEmbeddedSkins="False" Skin="Perkins"></telerik:RadMenu> |
| <asp:SiteMapDataSource ID="SiteMapDataSourceMenu" runat="server" ShowStartingNode="False" /> |
| </div> |
How do I grab just the first group, the rmRootGroup, without grabbing all the children is what I can't seem to figure out via CSS.
0
Hello Rick Glos,
Please use the following css styles to set static width to the root items and align the text in the center:
Greetings,
Yana
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Please use the following css styles to set static width to the root items and align the text in the center:
div.RadMenu .rmRootGroup .rmLink { padding: 0; }div.RadMenu .rmRootGroup .rmText { width: 120px !important; padding: 0; text-align: center;} div.RadMenu .rmGroup .rmText { width: auto !important;}div.RadMenu .rmGroup .rmText { margin:0 0 0 4px; padding:0 54px 0 28px; text-align: left; }Greetings,
Yana
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.