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>
6 Answers, 1 is accepted
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.
Rank 1
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
Rank 1
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>
Rank 1
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 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