Right-Align Last Navigation Node

7 posts, 0 answers
  1. Greg
    Greg avatar
    29 posts
    Member since:
    Oct 2007

    Posted 08 Mar 2015 Link to this post

    How can the last node in a RadNavigation control be right-aligned?

    Referring to the attached picture and the HTML below I'd like to right-align the "navNodeSearchBox" node within the RadNavigation control while all other items remain left-aligned.

                    <div id="divNavigation" class="pageWidthElementPlus5px" style="vertical-align:top; display:block; margin-left:-1px; text-align:left " >
                        <telerik:RadNavigation ID="radNavigation1" runat="server" MenuButtonPosition="Right" BorderStyle="None" BorderColor="Transparent" BorderWidth="0px" >
                            <Nodes>
                                <telerik:NavigationNode ID="navNodeHome" Text="Home" runat="server"></telerik:NavigationNode>
                                <telerik:NavigationNode ID="navNodeCategories" Text="Categories" runat="server"></telerik:NavigationNode>
                                <telerik:NavigationNode ID="navNodeSearch" Text="Search" runat="server"></telerik:NavigationNode>
                                <telerik:NavigationNode ID="navNodeView" Text="View" runat="server"></telerik:NavigationNode>
                                <telerik:NavigationNode ID="navNodeAbout" Text="About" runat="server"></telerik:NavigationNode>
                                <telerik:NavigationNode ID="navNodeMyAccount" Text="My Account" runat="server"></telerik:NavigationNode>
                                <telerik:NavigationNode ID="navNodeSearchBox" Text="search videos" runat="server" CssClass="searchBoxWrapper" Width="400">
                                    <NodeTemplate>
                                        <telerik:RadSearchBox ID="RadSearchBox1" runat="server" Width="370"></telerik:RadSearchBox>
                                    </NodeTemplate>
                                </telerik:NavigationNode>
                            </Nodes>
                        </telerik:RadNavigation>
                    </div>
  2. Plamen
    Admin
    Plamen avatar
    2734 posts

    Posted 09 Mar 2015 Link to this post

    Hi Greg,

    Here is the CSS that I added in order to achieve the desired behavior:
    <style type="text/css">
          .RadNavigation .searchBoxWrapper {
             position: absolute;
             right: 0;
             top: 0;
         }
      </style>

    Hope this will help you solve the issue.

    Regards,
    Plamen
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Edward
    Edward avatar
    83 posts
    Member since:
    Feb 2011

    Posted 26 Jun 2015 in reply to Plamen Link to this post

    This doesn't work for me.  I also try float: right; and that doesn't work either.
  5. Plamen
    Admin
    Plamen avatar
    2734 posts

    Posted 29 Jun 2015 Link to this post

    Hello Edward,

    It is not quite clear what exactly didn't work in your case. I have tested the provided code once again and it worked correctly at my side once again. You may also refer to this online demo where similar behavior is working correctly too.

    If you still can't figure it out please share the exact mark up of your Navigation control so we could inspect it and be more helpful.

    Regards,
    Plamen
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  6. Edward
    Edward avatar
    83 posts
    Member since:
    Feb 2011

    Posted 29 Jun 2015 Link to this post

    What I see:  http://snag.gy/GMne1.jpg 

    My code:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>

    <!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></title>
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
        <style type="text/css">
          .RadNavigation .searchBoxWrapper {
             position: absolute;
             right: 0;
             top: 0;     }
      </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" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
                </Scripts>
            </telerik:RadScriptManager>
            <script type="text/javascript">
                //Put your JavaScript code here.
            </script>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" >
            </telerik:RadAjaxManager>
            <div>
                <telerik:RadPageLayout ID="RadPageLayout1" runat="server" GridType="Fluid" >
                    <Rows>

                        <telerik:LayoutRow>
                            <Columns>
                                <telerik:LayoutColumn Span="12">
                                <div>
                                    <telerik:RadNavigation ID="RadNavigation1" runat="server">
                                        <Nodes>
                                            
                                            <telerik:NavigationNode Text="Data">
                                                <Nodes>
                                                    <telerik:NavigationNode Text="Demographic"></telerik:NavigationNode>
                                                    <telerik:NavigationNode Text="People"></telerik:NavigationNode>
                                                </Nodes>
                                            </telerik:NavigationNode>

                                            <telerik:NavigationNode Text="Report" >
                                                <Nodes>
                                                    <telerik:NavigationNode Text="ABC" />
                                                    <telerik:NavigationNode Text="DEF" />
                                                </Nodes>
                                            </telerik:NavigationNode>

                                            <telerik:NavigationNode ID="NavigationNode1" Text="Searchbox" runat="server">
                                                <NodeTemplate>
                                                    <telerik:RadSearchBox ID="RadSearchBox1" runat="server" CssClass="searchBoxWrapper"></telerik:RadSearchBox>
                                                </NodeTemplate>
                                            </telerik:NavigationNode>
                                            
                                        </Nodes>
                                    </telerik:RadNavigation>
                                </div>
                                    </telerik:LayoutColumn>
                            </Columns>
                        </telerik:LayoutRow>                    
                        
                    </Rows>

                </telerik:RadPageLayout>
            </div>
        </form>
        
    </body>
    </html>

  7. Edward
    Edward avatar
    83 posts
    Member since:
    Feb 2011

    Posted 29 Jun 2015 in reply to Edward Link to this post

    May I ask how to vertical align both the search box and the navigation node so they are middle align please?  Thanks.
  8. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 01 Jul 2015 Link to this post

    Hi Edward,

    The right position of the Last item can be achieved by floating the item to the left. The vertical alignment can be achieved by a custom padding to the rnvTemplate element. Here is a sample solution to resolve the issue:
    html .RadNavigation .rnvRootGroup {
        display: block;
    }
    html .RadNavigation .rnvTemplate {
        padding: 7px;
    }
    .rnvLast {
        float: right;
    }

    The padding of rnvTemplate depends on the used skin or custom styles. This padding is adapted for the Bootstrap skin without any additional customizing.

    If you would like to remove also state effects to the template, you can made it by applying the following CSS:
    html .RadNavigation .rnvTemplate.rnvRootLink {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
    }


    We hope this solution will work for your scenario. Do not hesitate to contact us if you have other questions.

    Regards,
    Magdalena
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017