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

[Solved] Layout with razor syntax at 100% issue

3 Answers 161 Views

Splitter

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

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

figueiredorj asked on 16 Aug 2011, 11:01 PM

Hi all.

I am trying to define an aplication layout with 2 containers full page - a menu on left and a full div on right side.
This is my code:

<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" charset="utf-8" />

<title>@ViewBag.Title</title>

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/CustomSite.css")" rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/jquery-1.6.2.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>

<style type="text/css">

html, body, form

{

height: 100%;

margin: 0px;

padding: 0px;

overflow: hidden;

}

</style>

@RenderSection("Scripts", false)

@RenderSection("Styles", false)

@(Html.Telerik().StyleSheetRegistrar()

.DefaultGroup(group => group

.Add("telerik.common.css")

.Add("telerik.transparent.min.css")

.Combined(true)

.Compress(true))

)

</head>

<body>

@{Html.Telerik().Splitter().Name("Splitter")

.HtmlAttributes(new { style = "height: 100%" })

.Orientation(SplitterOrientation.Horizontal)

.Panes(panes =>

{

panes.Add()

.MinSize("300px")

.Size("300px")

.MaxSize("300px")

.HtmlAttributes(new { style = "height:100%" })

.Collapsible(true)

.Resizable(false)

.Content(content => @Html.Partial("_Menu"));

panes.Add()

.Resizable(false)

.Collapsible(false)

.HtmlAttributes(new { style = "height:100%" })

.Content(content => @RenderBody());

})

.Render();

}

@Html.Telerik().ScriptRegistrar().jQuery(false)

</body>

</html>

At first look all seems okay. When page is loaded it is all window size and looks okay.
Problem is when I resize window: I should expect it to also resize with window, since I set styles to percentage.
Unfortunaley it doesn't happen.

When I look code on firebug the properties are set on pixels, so it doesn't resize on window resize.
Am I doing something not so good or is something missing? Or do I have to tweak with JS?
I would apreciate some help on this issue.

Thanks

3 Answers, 1 is accepted

Accepted