newly added Menu item pushed into second line

[Raghu]

Hi,
When we adde new menu tile to nav bar(Which is fixed size), The newly added item pushed to second line.
To fix this we decreased text-indent property to "-7px" from "4px" which was worked in IE8 and chrome but not in firefox.
How to fix for all browsers?, below is CSS of navbar

#navbar {
    display: block;
    background-repeat: repeat-x;
    height: 40px;
    /*width: 510px;*/
    width: 510px;
    text-indent:4px;
}

[Hristo Valyavicharski]

Hi Raghu,

What version of Telerik controls do you use? Do you have enabled lightweight render mode? Please paste your entire code including the code that adds the item.

Regards,
Hristo Valyavicharski
Telerik

[Raghu]

we created a datatable and we are adding sub menu's and menu title to datable after that we are binding this data table Telrik RADMENU controls like..                       

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="TelerikTest.ascx.cs" Inherits="controls_content_TelerikTest" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

 

<asp:Panel runat="server" ID="test" Visible="false" >

   

<div style="background-color:Black;">

 

<telerik:RadMenu ID="RadMenuTest" runat="server" EnableEmbeddedSkins="false" Skin="Default" OnItemClick="RadMenu1_ItemClick1"  >

</telerik:RadMenu>

 

</div>

</asp:Panel>

below is the code behind aspx page

public partial class controls_content_TelerikTest : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Request.Url.ToString().Contains("Telerik"))
        {
            test.Visible = true;
            DataTable dt = new DataTable();
            dt.Columns.Add("id", typeof(int));
            dt.Columns.Add("pid", typeof(int));
            dt.Columns.Add("name", typeof(string));

            dt.Rows.Add(1, null, "Parent 1");
            dt.Rows.Add(2, 1, "Child 1");
            dt.Rows.Add(3, 1, "Child 2");
            dt.Rows.Add(4, 1, "Child 3");
            dt.Rows.Add(5, null, "Parent 2");
            dt.Rows.Add(6, 5, "Child 1");
            dt.Rows.Add(7, 5, "Child 2");
            dt.Rows.Add(8, 5, "Child 3");

            RadMenuTest.DataSource = dt;
            RadMenuTest.DataFieldID = "id";
            RadMenuTest.DataFieldParentID = "pid";
            RadMenuTest.DataTextField = "name";
            RadMenuTest.DataBind();
        }
        else
        {
            test.Visible = false;
        }
    }
    protected void RadMenu1_ItemClick1(object sender, RadMenuEventArgs e)
    {
        Response.Write("fsdfs fsdfssdfd:"+e.Item.Text);

        if(e.Item.Parent != null)
        {
            Control c = e.Item.Parent;

            RadMenuItem i = (RadMenuItem)c;
            Response.Write(i.Text);
        }


    }

We observed some styling for Telerik control as

.RadMenu .rmHorizontal .rmText {

1. padding: 0 12px 1px 0;

}

we deleted this padding ans make test-indent to 4px in out style sheet using browser debugger tool then menu showing properly in nav bar..
can you please suggest how to solve this.

this is our style sheet related to navigation

/*Top Nav Bar */

#navbar {
    display: block;
    background-image: url(../images/button_bkg.jpg);
    background-repeat: repeat-x;
    height: 40px;
    /*width: 510px;*/
    width: 510px;
    text-indent: -7px;
}
#navlink
{
    float: left;
    color: #FFFFFF;
    padding-top: 10px;
    padding-right: 5px;
    padding-left: 5px;
    font-size: 13px;
    font-weight: bold;
}
#navlink a:link, #navlink a:visited
{
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
    
}  #navlink:hover
  {
    background-color: #000000;
    background-repeat: no-repeat;
    background-position: 0 0;
    height: 30px;    
 }    
 
.navdiv {
    background-image: url(../images/button_div.jpg);
    background-repeat: no-repeat;
    height: 40px;
    width: 5px;
    float: left;
    position: relative;
}

below is the telerik version

[Hristo Valyavicharski]

Hi Raghu,

The pasted code doesn't show how you are adding a new item. Also I wouldn't recommend you to use
Response.Write, because it writes the text outside the form, which cause many issues especially on IE.

Regards,
Hristo Valyavicharski
Telerik

[Raghu]

Earlier code was test page code..The code we are using in application is as follows

<telerik:RadMenu ID="RadMenu1" runat="server" EnableEmbeddedSkins="false" OnItemDataBound="RadMenu1_ItemDataBound" >
    </telerik:RadMenu> 

protected void RadMenu1_ItemDataBound(object sender, Telerik.Web.UI.RadMenuEventArgs e)
    {
        if(e.Item.Level > 0)
        {
            e.Item.GroupSettings.ExpandDirection = Telerik.Web.UI.ExpandDirection.Left;
        }
    }

what i observed in styling Rad menu control has following styling for Menu text

.RadMenu .rmHorizontal .rmText {

1. padding: 0 12px 1px 0;

}

If we remove this styling property all the menu titles showing in one line, and also by decreasing test indent property of nav bar as below
#navbar {
    display: block;
    background-image: url(../images/button_bkg.jpg);
    background-repeat: repeat-x;
    height: 40px;
    /*width: 510px;*/
    width: 510px;
    text-indent: 1px; (* initial has 4px)(** if we make text-indent to -7PX, with out any other changes it's working fine for chrome and IE but not for Firefox.)
}

How do we have to fix at global level?

Do you require any another code? or you can view the website http://staging.exair.com/en-us/Pages/default.aspx and observe the right header menu navigation.

[Kate]

Hello Raghu,

To override the styles that you mentioned you can add the following ones:

div.RadMenu .rmHorizontal .rmText {
//here you can change the values to match the desired ones
//for example you can use the line below instead
//  padding: 0;
    padding: 0 12px 1px 0;

}

Regarding the other selector you can use the !important to increase the specificity of the desired property and thus apply the new value. For example to change the height you can use the lines below:

#navbar {
    display: block;
    background-image: url(../images/button_bkg.jpg);
    background-repeat: repeat-x;
    height: 40px !important;
    /*width: 510px;*/
    width: 510px;
    text-indent: 1px; (* initial has 4px)(** if we make text-indent to -7PX, with out any other changes it's working fine for chrome and IE but not for Firefox.)
}

 
Regards,
Kate
Telerik