[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.

Code:

---

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

   


}

---

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:
https://examples2.ext.net/#/Layout/VBoxLayout/Basic/
https://examples2.ext.net/#/Layout/HBoxLayout/Basic/

Also, you can use AnchorLayout:
https://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.

Here is your sample with some additions to display main blocks:

Code:

---

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

---

I have attached an image.

Thanks.
Attachment 7095

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.

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.

Centering a Panel with a Minimum and Maximum width seems pretty straightforward.

Example

Code:

---

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

---