This is a migrated thread and some comments may be shown as answers.

newly added Menu item pushed into second line

5 Answers 107 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Raghu
Top achievements
Rank 1
Raghu asked on 20 Dec 2013, 12:14 PM
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;
}

5 Answers, 1 is accepted

Sort by
0
Hristo Valyavicharski
Telerik team
answered on 25 Dec 2013, 09:54 AM
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
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 the blog feed now.
0
Raghu
Top achievements
Rank 1
answered on 26 Dec 2013, 09:18 AM
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




0
Hristo Valyavicharski
Telerik team
answered on 26 Dec 2013, 12:40 PM
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
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 the blog feed now.
0
Raghu
Top achievements
Rank 1
answered on 27 Dec 2013, 09:13 AM
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.
0
Kate
Telerik team
answered on 31 Dec 2013, 09:58 AM
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
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 the blog feed now.
Tags
Menu
Asked by
Raghu
Top achievements
Rank 1
Answers by
Hristo Valyavicharski
Telerik team
Raghu
Top achievements
Rank 1
Kate
Telerik team
Share this question
or