[CLOSED] [RAZOR] Using viewport to make panel fit available browser window

[gets_gui]

Hi

I'm trying to layout my application so the panels resize dynamically based on the size of the browser window. I've tried to use the ViewPort (with LayoutType.Fit) to encapsulate my controls, however this caused the Panel the take up the complete browser window.

_Layout.chstml (Displays components from _Control1.cshtml and index.cshtml)

...
<div id="search">           
 @Html.Partial("_Control1") --> _Control1.cshtml
</div>
<div id="main">
 @RenderBody() --> index.cshtml
</div>
...

_Control1.cshtml

Html.X().ViewPort()
 .Layout(LayoutType.Fit)
 .Items(items =>
  items.Add(Html.X().FormPanel()
    .ID("formPanel")
    .Title("formPanel")
    .Collapsible(true)
    .Layout(LayoutType.HBox)
    .Items(items =>
    {
        items.Add(Html.X().Panel()
          .ID("catePanel")
          .Title("Date")
          .Closable(true)
          .CloseAction(CloseAction.Hide)
           ...

index.cshtml

<h2>@ViewBag.Title</h2>
@(
Html.X().ViewPort()
 .Layout(LayoutType.Fit)
 .Items(items =>
  items.Add(Html.X().TabPanel()    
    .ID("TabPanel")
    .Title("TabPanel")
    .Add(Html.X().Panel()
            .ID("Summary")
            .Title("Summary")
            .Split(true)
            .Layout(Ext.Net.LayoutType.Accordion)
            .Add(Html.X().Panel()
                .ID("InnerSummaryPanel")
                .Title("Inner Summary")
                .Layout(Ext.Net.LayoutType.Fit)
                .Add(Html.X().GridPanel(
                ...