or
| <%@ Page Language="C#" AutoEventWireup="false" CodeFile="ProgramItem.aspx.cs" Inherits="app_Default" %> |
| <%@ Register TagPrefix="radspl" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml" > |
| <head runat="server"> |
| <title>Página sin tÃtulo</title> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asps:ScriptManager ID="SC1" runat="server"></asps:ScriptManager> |
| <radspl:RadAjaxManager ID="RadAMang" runat="server" DefaultLoadingPanelID="panel1"> |
| <AjaxSettings> |
| <radspl:AjaxSetting AjaxControlID="pRath" > |
| <UpdatedControls> |
| <radspl:AjaxUpdatedControl ControlID="ajaxpanel1" /> |
| </UpdatedControls> |
| </radspl:AjaxSetting> |
| </AjaxSettings> |
| </radspl:RadAjaxManager> |
| <radspl:RadAjaxLoadingPanel ID="panel1" runat="server" Transparency="30" BackColor="#E0E0E0" > |
| <asp:Image ID="image2" runat="server" AlternateText="Actualizando Datos..." BorderWidth="0px" ImageUrl="~/RadControls/Ajax/Skins/Default/loading.gif" /> |
| </radspl:RadAjaxLoadingPanel> |
| <table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%"> |
| <tr><td height="100%" width="25%"> |
| <radspl:RadPanelBar runat="server" ID="pRath" Height="100%" Width="100%" ExpandMode="FullExpandedItem" EnableViewState="false" PersistStateInCookie="false" OnItemClick="pRath_ItemClick" > |
| </radspl:RadPanelBar> |
| </td> |
| <td height="100%" width="50%" valign="top" style="text-align:center;"> |
| <radspl:RadAjaxPanel ID="ajaxpanel1" runat="server" > |
| <div runat="server" id="DatosRuta" style="width:90%; height:90%; vertical-align:top; margin-left:auto; margin-right:auto;"> |
| <input type="hidden" id="IDRuta" name="IDRuta" runat="server" value="000" /> |
| <table cellpadding="0" cellspacing="0" width="100%" border="1"> |
| <tr> |
| <td width="30%" align="right" >Nombre:</td> |
| <td width="70%" align="left" style="padding-left:5px;"> |
| <input runat="server" id="TextName" type="text" value=""/></td></tr> |
| <tr> |
| <td align="right">Color</td> |
| <td align="left" style="padding-left:5px;"> |
| <radspl:RadColorPicker runat="server" ID="IDColor" ShowIcon="true" ShowEmptyColor="false" SelectedColor="white" > |
| </radspl:RadColorPicker> |
| </td></tr> |
| </table></div> |
| </radspl:RadAjaxPanel> |
| </td> |
| <td height="100%" width="25%" valign="top"> |
| <input type="button" id="btnNew" class="formBtnText" value=" Salvar " onclick="RouteSave()" /> |
| </td> |
| </tr> |
| </table> |
| </form> |
| </body> |
| </html> |
| public partial class app_Default : System.Web.UI.Page |
| { |
| #region Web Form Designer generated code |
| override protected void OnInit(EventArgs e) |
| { |
| InitializeComponent(); |
| base.OnInit(e); |
| } |
| private void InitializeComponent() |
| { |
| this.Load += new System.EventHandler(this.Page_Load); |
| this.pRath.ItemClick += new RadPanelBarEventHandler(pRath_ItemClick); |
| this.pRath.ItemCreated += new RadPanelBarEventHandler(pRath_ItemCreated); |
| } |
| #endregion |
| protected void Page_Load(object sender, EventArgs e) |
| { |
| if (!Page.IsPostBack) |
| { |
| TextName.Value = "BEFORE POSTBACK"; |
| LoadPanels(); |
| } |
| else |
| { TextName.Value = "AFTER POSTBACK"; } |
| } |
| public void pRath_ItemClick(object sender, RadPanelBarEventArgs e) |
| { |
| TextName.Value = "ON ITEMCLICK"; |
| } |
| private void LoadPanels() |
| { |
| RadPanelItem pItem = new RadPanelItem("Root 1"); |
| RadPanelItem pItem2 = new RadPanelItem("Panel Item 1"); |
| pItem2.NavigateUrl = string.Empty; |
| pItem.Items.Add(pItem2); |
| pItem.NavigateUrl=""; |
| pRath.Items.Clear(); |
| pRath.Items.Add(pItem); |
| pRath.Items[0].Expanded = true; |
| } |
| void pRath_ItemCreated(object sender, RadPanelBarEventArgs e) |
| { |
| if (e.Item.Level > 0) |
| e.Item.NavigateUrl = String.Empty; |
| } |
| } |



I'm attempting to make the root menu items on my menu a bit wider. I managed to find properties in the CSS that widen the menu, but then the background graphic gets messed up. What happens is that the graphic ends before the end of the menu item area. I'm just wondering if there is a way to make each menu item just a bit wider without having to define the width of each one.
Below is the original, then modified CSS for the menuitem. If I could attach an image, I could show the behavior. Unfortunately the site I'm working on isn't yet public so I can't send a link without going through a fair amount of work.
Original
| .RadMenu_TopMenu .rmLink |
| { |
| color: #000; |
| text-decoration: none; |
| font: normal 12px/18px "segoe ui",arial,sans-serif; |
| height: 18px; |
| position: relative; |
| _float:left; |
| border-right: 1px solid #d1d5e0; |
| border-left: 0px solid #d1d5e0; |
| } |
My changes
| .RadMenu_TopMenu .rmLink |
| { |
| color: #000; |
| text-decoration: none; |
| font: normal 12px/18px "segoe ui",arial,sans-serif; |
| height: 18px; |
| position: relative; |
| _float:left; |
| border-right: 1px solid #d1d5e0; |
| border-left: 0px solid #d1d5e0; |
| padding-right: 5px; |
| padding-left: 5px; |
| } |