[CLOSED] Master Pages Sample - Content Height (and Responsive Design) Problem

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1

    [CLOSED] Master Pages Sample - Content Height (and Responsive Design) Problem

    I'm submitting a cleaned-up/simple Master pages running sample taken from project that I am updating from (v1.2 to v4.2)

    This Post is related to these other forum posts:

    This Sample suffers from the <CONTENT> fit to Vertical problem that was discussed in previous Post and was added as a Feature Request for newer version github issues 1475

    My Question is:
    Has Anybody come up with a current version solution when working with Master pages and a Main screen having a North/West/Center/South setup? Main problem is with Center region not fitting as it did in version 1.2 (using the Layout elements).


    I have found a CSS Hack to make it initially render correctly - But the problem with this solution is I loose the Responsive nature of the Center section (when resizing screen). The Hack is the 2 CSS style lines commented at top of SITEOVERALL.MASTER file (in sample) and the setting of HEIGHTSPEC=100% on the BEINGPROCESSED page (in sample)





    SAMPLE CODE:
    (This is running in V4.2 Samples project)


    FILE: SiteOverallLayout.Master
    <%@ Master Language="C#" AutoEventWireup="true" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head runat="server">
        <title>LayoutMaster</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
       
         <style type="text/css">
            div[id*='-body']        { border: 1px solid dodgerblue; }
            div[id*='-bodyWrap']    { border: 2px dotted yellowgreen; }
            div[id*='-outerCt']     { border: 1px solid aqua; }
            div[id*='-innerCt']     { border: 2px dotted red; }
            div[id*='-targetEl']    { border: 1px solid purple; }
    
            /* Hacks for EXT HEIGHT Inheritance problem  with <CONTENT> element */
            /*div[id^='ctl'][id$='_Content']          { height: inherit !important; }
            div[id^='App.ctl'][id$='_Container']    { height: inherit !important; }*/
        </style>
    
        <asp:ContentPlaceHolder ID="head" runat="server" />
    </head>
    
    <body id="SiteOverallMasterBody" runat="server">
        <form id="form1" runat="server">
    
            <ext:ResourceManager runat="server" ID="resManager"></ext:ResourceManager>
    
            <ext:Viewport ID="MainViewPort" runat="server" Layout="BorderLayout">
                <Items>
                    <ext:Panel Region="North" ID="NorthZonePanel" runat="server" Height="60" BodyCls="top-backgr">
                        <Content>
                            <table width="100%" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td style="width: 236px; text-align: left;">
                                        <asp:Image ID="Image1" ImageUrl="http://ws.factortrust.com/wp-content/uploads/2015/10/epicLogo.jpg" Height="60" runat="server" AlternateText="logo" />
                                    </td>
                                    <td>
                                        <asp:PlaceHolder runat="server" ID="PlaceHolder1" Visible="true">Welcome,
                                            <asp:Label ID="userName" runat="server" Text="UserName" Font-Bold="True" Font-Italic="True" />!
                                        </asp:PlaceHolder>
                                    </td>
                                    <td align="right" valign="top">
                                        <p>LOGIN BLOCK CONTROL</p>
                                    </td>
                                </tr>
                            </table>
                        </Content>
                    </ext:Panel>
    
                    <ext:Panel Region="West"  ID="WestZonePanel" runat="server" Title="Navigation" Width="200" Split="false" >
                       <Content>
                            <asp:ContentPlaceHolder ID="westZone"  runat="server" />
                        </Content>
                    </ext:Panel>
                    
                    <ext:Panel ID="CenterZonePanel" runat="server" Region="Center" AutoScroll="false">
                        <Content>
                            <asp:ContentPlaceHolder ID="centerZone" runat="server"/>
                        </Content>
                    </ext:Panel>
    
                    <ext:Panel  ID="SouthZonePanel" Region="South" runat="server" Border="false">
                        <Content> 
                            <p>FOOTER ASCX CONTROL</p>
                        </Content>
                    </ext:Panel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>

    FILE: RootLayout.master
    <%@ Master Language="C#" MasterPageFile="SiteOverallLayout.Master" AutoEventWireup="true" %>
    
    <asp:Content ContentPlaceHolderID="head" runat="server" >
        <asp:ContentPlaceHolder runat="server" ID="head" />
    </asp:Content>
    
    <asp:Content ContentPlaceHolderID="westZone"  ID="RootLayoutWestPlaceHolder" runat="server">
        <ext:Panel ID="WestMenuPanel" runat="server" Height="180" Width="200" Border="false">
            <Content>
                <ext:MenuPanel runat="server" ID="anonymousMenu" Title="Main" Icon="User" Border="False" Collapsible="true">
                    <Menu runat="server" Cls="mainMenu">
                        <Listeners>
                            <Click Handler="LoadPage(menuItem.url);" />
                        </Listeners>
                    </Menu>
                </ext:MenuPanel>
            </Content>
        </ext:Panel>
    </asp:Content>
    
    <asp:Content ContentPlaceHolderID="centerZone"  ID="RootLayoutCenterPlaceHolder" runat="server">
        <asp:ContentPlaceHolder runat="server" ID="pageContent" />
    </asp:Content>

    FILE: BeingProcessed.aspx
    <%@ Page Language="C#" MasterPageFile="RootLayout.master" AutoEventWireup="true" %>
    
    <asp:Content runat="server" ID="ASPPageContent" ContentPlaceHolderID="pageContent" >
        
        <ext:Panel ID="BeingProcFitLayout" Layout="FitLayout" runat="server"><%-- HeightSpec="100%" >--%>
            <Items>
                <ext:Panel ID="BeingProcVBoxPanel"  runat="server" >
                    <LayoutConfig>
                        <ext:VBoxLayoutConfig Align="Stretch" Pack="Center" />
                    </LayoutConfig>
    	            <Items>
    		            <ext:Label runat="server" StyleSpec="font-weight:bold;" Text="Your request has been processed"></ext:Label>
                        <ext:Label runat="server" StyleSpec="font-weight:bold;" ID="lblErrorId"></ext:Label>
    	            </Items>
                </ext:Panel>
            </Items>
        </ext:Panel>
    
    </asp:Content>
    Last edited by fabricio.murta; Aug 18, 2017 at 10:13 PM. Reason: no feedback from the user in 7+ days

Similar Threads

  1. Replies: 9
    Last Post: Mar 04, 2015, 7:59 PM
  2. Replies: 1
    Last Post: Jul 15, 2013, 1:35 PM
  3. can we set master pages in ext .net design
    By vbmathew in forum 2.x Help
    Replies: 3
    Last Post: Oct 25, 2012, 10:40 AM
  4. [CLOSED] Problem showing hidden panel when using master pages
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Oct 01, 2010, 3:42 PM
  5. Looking for asp.net sample pages
    By pkellner in forum Open Discussions
    Replies: 1
    Last Post: Sep 17, 2008, 3:24 PM

Posting Permissions