May 17, 2017, 2:45 PM
[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
FILE: RootLayout.master
FILE: BeingProcessed.aspx
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