[CLOSED] Fluid Layout for Desktop and Mobile

  1. #1

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

    @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]
  2. #2
    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.
    Last edited by Baidaly; Oct 22, 2013 at 5:50 AM.
  3. #3
    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)
            )
    )
  4. #4

    Fluid Layout for Desktop and Mobile

    I have attached an image.

    Thanks.
    Click image for larger version. 

Name:	WebSiteDesign.jpg 
Views:	22 
Size:	75.7 KB 
ID:	7095
    Attached Thumbnails Click image for larger version. 

Name:	WebSiteDesign.jpg 
Views:	10 
Size:	77.0 KB 
ID:	7094  
    Last edited by edip; Oct 23, 2013 at 12:06 PM.
  5. #5
    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.
    Geoffrey McGill
    Founder
  6. #6

    Fluid Layout for Desktop and Mobile

    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.
  7. #7
    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>
    Geoffrey McGill
    Founder

Similar Threads

  1. [CLOSED] Mobile
    By rnfigueira in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 04, 2011, 2:32 PM
  2. [CLOSED] Layout issue with iframe window in desktop
    By Labyrinth in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 01, 2010, 2:58 PM
  3. Replies: 2
    Last Post: Mar 15, 2010, 1:45 PM
  4. Desktop layout bug under IE6
    By asztern in forum Bugs
    Replies: 1
    Last Post: Sep 26, 2009, 5:36 PM

Tags for this Thread

Posting Permissions