newly added Menu item pushed into second line

6 posts, 0 answers
  1. Raghu
    Raghu avatar
    3 posts
    Member since:
    Dec 2013

    Posted 20 Dec 2013 Link to this post

    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;
    }
  2. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 25 Dec 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Raghu
    Raghu avatar
    3 posts
    Member since:
    Dec 2013

    Posted 26 Dec 2013 Link to this post

    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




  5. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 26 Dec 2013 Link to this post

    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.
  6. Raghu
    Raghu avatar
    3 posts
    Member since:
    Dec 2013

    Posted 27 Dec 2013 Link to this post

    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.
  7. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 31 Dec 2013 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017