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

  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
  2. #2
    Hello @Rafaelcjr!

    I found that the following CSS selector on your SiteOverallLayout.Master file and uncommenting the HeightSpec="100%" on your BeingProcessed.aspx files does the trick in this case:

    /* CSS selector to make <content> divs fit 100% height */
    div[id*='-innerCt'] > div,
    div[id*='-innerCt'] > div > div  {
        height: 100%
    }
    Being more specific on the CSS rule matching may help avoid undesired results in other places:
    /* CSS selector to make <content> divs fit 100% height */
    div[id*='ZonePanel-innerCt'] > div,
    div[id*='ZonePanel-innerCt'] > div > div  {
        height: 100%
    }
    As you are using CenterZonePanel, WestZonePanel for each zone's IDs, the selector above just matches. If you want to be even more specific, use CSS class matching and give the panels the CSS class, say, zonePanel, then:

    .zonePanel .x-autocontainer-innerCt > div,
    .zonePanel .x-autocontainer-innerCt > div > div {
        height: 100%
    }
    And for each panel inside the viewport on the SiteOverallLayout.Master file, add the Cls="zonePanel" to each panel you want/need to follow these rules.

    If all panels, you can just add this inside the ViewPort block (same level viewport's <Items /> block):

    <Defaults>
        <ext:Parameter Name="cls" Value="zonePanel" />
    </Defaults>
    So, there you are, several alternatives to try with. I hope this can help you understand the concept, and that you understand that wrapping code inside Content blocks should be done that way, as we can't control what's inside the custom HTML blocks there.

    Just to clarify, in the last use case (using the zonePanel class as selector, here's how the code should look like. I've used different file names here in my project.

    61920-masterMaster.Master (SiteOverallMaster.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>
        <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; }
    
            .zonePanel .x-autocontainer-innerCt > div,
            .zonePanel .x-autocontainer-innerCt > div > div {
                height: 100%
            }
        </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">
                <Defaults>
                    <ext:Parameter Name="cls" Value="zonePanel" />
                </Defaults>
                <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>
    61920-slaveMaster.Master (Rootlayout.master -- not modified at all)
    <%@ Master Language="C#" MasterPageFile="61920-masterMaster.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>
    61920-slavePage.aspx (BeingProcessed.aspx)
    <%@ Page Language="C#" MasterPageFile="61920-slaveMaster.Master" AutoEventWireup="true" %>
    
    <asp:Content runat="server" ID="ASPPageContent" ContentPlaceHolderID="pageContent" >
        <%-- The HeightSpec here is necessary --%>
        <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>
    Notice that as you change the number of master-page-inheriting layers, you'll have to investigate the page DOM and review the CSS rules to match the problematic divs. Use your browser's DOM explorer to go down each layer and see which div/element didn't scale. That topic is beyond Ext.NET scope, though.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello @Rafaelcjr!

    Did the response above help you at all? Do you still need help with your initial inquiry? It's been a while since we last posted and no feedback from you still so, we're wondering whether you still need help with this or not.

    Please be aware that we may be marking this thread as closed if you don't provide a feedback in 7+ days from now. This won't by any means prevent you from posting back here even after we place the 'closed' tag in the thread, so don't worry if you can't provide a feedback now and still want to at a later time.
    Fabrício Murta
    Developer & Support Expert

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