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

[Solved] tabstrip is rendering improperly

1 Answer 33 Views

TabStrip

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

This question is locked. New answers and comments are not allowed.

Siddartha asked on 28 Mar 2012, 11:37 PM

I am developing an application using nested master pages using Razor. The topmost master page is called _Layout.cshtml.

LandingLayout.cshtml is the nested master page which is inheriting from _Layout.cshtml.
I have a Tabstrip defined in LandingLayout.cshtml that is rendering improperly when my page is displayed. Below is the page source to show what the error I see is.

<div class="t-widget t-tabstrip t-header" id="menu" style="width:1180px;align:center;margin-bottom: 0px;border:0px;"><ul class="t-reset t-tabstrip-items"><li class="t-item t-state-default"><a class="t-link" href="/">Home</a></li><li class="t-item t-state-default t-state-active"><a class="t-link" href="/MyWork/ViewCases">My Orders</a></li><li class="t-item t-state-default"><a class="t-link" href="/MyWork/Notifications">Notifications</a></li><li class="t-item t-state-default"><a class="t-link" href="/MyWork/Resources">Resources</a></li><li class="t-item t-state-default"><a class="t-link" href="/MyWork/Imaging">Imaging</a></li><li class="t-item t-state-default"><a class="t-link" href="/MyWork/Billing">Billing</a></li></ul><div class="t-content t-state-active" id="menu-2" style="display:block"></div><div class="t-content" id="menu-3"></div><div class="t-content" id="menu-4"></div><div class="t-content" id="menu-5"></div><div class="t-content" id="menu-6"></div></div><!DOCTYPE html>
<html>
<head>
    <title>MyWork</title>
    <link href="/Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/JScripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/JScripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>

The issue is Tabstrip is inserted at the top of the page instead of where I wanted it to be i.e. within the LandingLayout.

My Tabstrip code in the LandingLayout.cshtml is

{

Layout = "~/Views/Shared/_Layout.cshtml";

ViewBag.Title = "MyWork";

}

<!DOCTYPE html>

<html>

<head>

<title>@ViewBag.Title</title>

</head>

<body>

<div id="placeOrder"style="width:1170px;" align="right" >

<input type="submit" value="Place Order" style="background-color:#67B0F5;"/>

</div>

<div id="menucontainer">

@{Html.Telerik().TabStrip()

.Name("menu")

.HtmlAttributes(new { style = "width:1180px;align:center;margin-bottom: 0px;border:0px;" })

.Items(menu =>

{

menu.Add().Text("Home").Action("Index", "Home");

menu.Add().Text("Billing").LoadContentFrom("Billing", "MyWork");

})

.SelectedIndex(1)

.Render();

}

</div>

<div id="main">

@RenderBody()

</div>

</body>

</html>

Could anyone please let me know what is that I am doing wrong that Tabstrip is getting included at the top of the page

[Solved] tabstrip is rendering improperly

1 Answer, 1 is accepted