Oct 21, 2013, 8:41 PM
[CLOSED] Fluid Layout for Desktop and Mobile
Hello,
I would like to create a fluid layout and have my center content panel width range (455px to 1000px) and the panels on either side to equally take up the remainder of the viewport. I have pasted my code below but it does not work completely. Any help is appreciated.
Thanks.
I would like to create a fluid layout and have my center content panel width range (455px to 1000px) and the panels on either side to equally take up the remainder of the viewport. I have pasted my code below but it does not work completely. Any help is appreciated.
Thanks.
@using Ext.Net ;
@using Ext.Net.MVC ;
@{
Layout = "~/Views/Shared/BaseLayout.cshtml";
ViewBag.Title = "Home";
var X = @Html.X ( );
var iSiteWidth = 1000;
var iMinWidth = 455;
}
<h2>Home</h2>
@section Content
{
@(X.ResourceManager ( ).CleanResourceUrl ( false ))
@(X.Viewport ( )
.ID ( "SiteViewport" )
.Layout ( Ext.Net.LayoutType.Border )
.Cls ( "SiteViewPort" )
.Items
(
X.Panel()
.ID ("TopContainer")
.Region ( Ext.Net.Region.Center )
.BodyCls ( "TopContainer" )
.Layout ( Ext.Net.LayoutType.Border )
.Border (false )
.Frame ( false )
.Items
(
X.Panel ( )
.ID ( "LeftPanel" )
.Region ( Ext.Net.Region.West )
.BodyStyle ( "background-color:transparent;" )
.Border ( false )
.Frame ( false )
.Flex ( 1 ) ,
X.Panel ( )
.ID ( "Center" )
.Region ( Region.Center )
.BodyCls ( "CenterPanel" )
.Layout ( Ext.Net.LayoutType.Border )
.Flex ( 4 )
.Border ( false )
.Frame ( false )
.BodyStyle ( "background-color:transparent;" )
.MaxWidth ( iSiteWidth )
.MinWidth ( iMinWidth )
.Items
(
X.Panel ( )
.ID ( "Header" )
.Region ( Ext.Net.Region.North )
.BodyCls ( "HeaderPanel" )
.BodyStyle ( "background-color:transparent;")
.Frame ( false )
.Border ( false )
//.Html ( @"<img src=""../Resources/Images/TruffleKingsLogoBlackWithWriting500x562.gif"" height=""160px""/>" )
//.Html ( @"<img src=""../Resources/Images/TruffleKingsLogoBlack494x489.gif"" height=""145px""/>" )
//.Html ( @"<img src=""../Resources/Images/TruffleKingsLogoBlackOutlined498x493.gif"" height=""145px""/>" )
.Html ( @Evolutia.LoadHtmlFile ( "~/Html/Header.html") )
,
X.Panel ( )
.ID ( "Content" )
.Region ( Region.Center )
.Layout ( Ext.Net.LayoutType.Fit )
.BodyStyle ( "background-color:transparent;" )
.Border ( false )
.Frame ( false )
.Margins ( "0 0 0 0" )
),
X.Panel ( )
.ID ( "RightPanel" )
.Region ( Ext.Net.Region.East )
.BodyStyle ( "background-color:transparent;" )
.Border ( false )
.Frame ( false )
.Flex ( 1 )
),
X.Panel ( )
.ID ( "Footer" )
.Region ( Ext.Net.Region.South )
.BodyCls ( "FooterPanel")
.AnchorHorizontal ( "50px" )
.Border ( false )
.Frame ( false )
.Height ( 90 )
)
)
}
Last edited by Daniil; Oct 29, 2013 at 11:58 AM.
Reason: [CLOSED]