PDA

View Full Version : [CLOSED] Fluid Layout for Desktop and Mobile



edip
Oct 21, 2013, 9:41 PM
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.



@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 )


)
)




}

Baidaly
Oct 22, 2013, 12:02 AM
Hello!

BorderLayout supports Flex but there can a problem with setting Min and MaxWidth. I think in your case it's better you to use either VBox or HBox:
http://examples2.ext.net/#/Layout/VBoxLayout/Basic/
http://examples2.ext.net/#/Layout/HBoxLayout/Basic/

Also, you can use AnchorLayout:
http://examples2.ext.net/#/Layout/AnchorLayout/Basic/

In addition, you layout looks very complex, can you clarify what is your requirements, maybe it's possible to simplify it. Picture of required markup would be very helpful.

Baidaly
Oct 22, 2013, 12:04 AM
Here is your sample with some additions to display main blocks:


@using Ext.Net;
@using Ext.Net.MVC;
@using ScriptMode = Ext.Net.ScriptMode


@{
ViewBag.Title = "Home";
var X = @Html.X();
var iSiteWidth = 1000;
var iMinWidth = 455;
}

<h2>Home</h2>
@(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)
.Height(200)
.Items
(
X.Panel()
.ID("LeftPanel")
.Region(Ext.Net.Region.West)
.BodyStyle("background-color:transparent;")
.Border(false)
.Frame(false)
.Html("Left Panel")
.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;")
.Html("Center Panel")
.MaxWidth(iSiteWidth)
.MinWidth(iMinWidth)
.Items
(
X.Panel()
.ID("Header")
.Region(Ext.Net.Region.North)
.BodyCls("HeaderPanel")
.BodyStyle("background-color:transparent;")
.Frame(false)
.Border(false)
,
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;")
.Html("Right Panel")
.Border(false)
.Frame(false)
.Flex(1)
),
X.Panel()
.ID("Footer")
.Region(Ext.Net.Region.South)
.Html("Bottom")
.BodyCls("FooterPanel")
.AnchorHorizontal("50px")
.Border(false)
.Frame(false)
.Height(90)
)
)

edip
Oct 23, 2013, 1:03 PM
I have attached an image.

Thanks.
7095

geoffrey.mcgill
Oct 23, 2013, 2:31 PM
I'm not entirely sure if you're saying the sample we provided works for you, or not?

Based on the image you provided, it's still tough to say what exactly your requirements are.

edip
Oct 23, 2013, 2:59 PM
Hi Geoff,
I think it is a pretty common layout and it only applies to the horizontal sizing of your site...

It is similar to having a div horizontally centered in the middle of your page with a maximum and minimum width ( so say the min width of the content div is 455 pixels and the max content div width is 1100 pixels. When the viewport width is greater than your max ( 1100 px ), then the content div is horizontally centered in the middle of the viewport and your background or another solid color is shown on either side. When the viewport is less then 1100px, the content div width resizes to fill the viewport to a minimum value of 455px.

I noticed that when I use flex in the ext.panel, the content div is not always in the horizontal center when resizing.

Thanks.

geoffrey.mcgill
Oct 23, 2013, 3:30 PM
Centering a Panel with a Minimum and Maximum width seems pretty straightforward.

Example


<%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Viewport runat="server" Layout="HBoxLayout">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Container runat="server" Flex="1" />
<ext:Panel
runat="server"
Title="Center"
Flex="4"
Html="Center"
BodyPadding="10"
MinWidth="455"
MaxWidth="1100"
/>
<ext:Container runat="server" Flex="1" />
</Items>
</ext:Viewport>
</form>
</body>
</html>