[CLOSED] Problem/Bug with Layouts -- Specifically: Vertical Height Fit
Continuing with the Vertical Height problems discussed in Post:
FitLayout Content not stretching
On that Post I received the following Response/Explanation:
Quote:
Well, a container's layout only governs over items added inside the container, not free html code. In other words, Layout="FitLayout" will only work on components inside the container if they are defined inside a <items></items> block. It is expected not to work if you used <content></content>.
So I've gone ahead and tried to recreate this specific scenario (EXT container with Layout and (ext) Items -- NO <Content/Html>):
(Maybe I am doing something wrong and there is a simple setting/property/attribute that I am missing - I hope so )
I am running your full v4.2 examples project Locally on my Dev environment
I took the FitLayout/Basic/Default.aspx page and changed it so:
Code:
<html>
<head runat="server">
<title>Fit Layout - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<style type="text/css">
span {font-weight:bold;}
/*div { border: 2px solid yellowgreen; }*/
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; }
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Viewport runat="server" Layout="BorderLayout">
<Items>
<ext:Panel ID="TargetPanelNorth" runat="server" region="North"
Html="<asp:Panel runat='server' ID='ASP_NorthPanel'><asp:Label ID='ASP_NorthLabel' runat='server'>This is the North Panel</asp:Label></asp:Panel>">
</ext:Panel>
<ext:Panel ID="TargetPanelWest" runat="server" region="West"
Html="<asp:Panel runat='server' ID='ASP_WestPanel'><asp:Label ID='ASP_WestLabel' runat='server'>This is the West Panel</asp:Label></asp:Panel>">
</ext:Panel>
<ext:Panel ID="TargetPanelSouth" runat="server" region="South"
Html="<asp:Panel runat='server' ID='ASP_SouthPanel'><asp:Label ID='ASP_SouthLabel' runat='server'>This is the South Panel</asp:Label></asp:Panel>">
</ext:Panel>
<ext:Panel ID="TargetPanelCenter" runat="server" Region="Center">
<Items>
<ext:Panel ID="TargetPanelCenterFit" runat="server" Layout="FitLayout" HeightSpec="100%">
<Items>
<ext:Panel ID="TargetPanelCenterVbox" runat="server" Layout="VBoxLayout">
<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;" Text="Process Result: 23534746"></ext:Label>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
This is what I thought it was going to look Like
(Note: This is what EXT Version 1.2 renders)
Attachment 24952
This is what I Currently Get.
Attachment 24951
Below are the Details of Rendering from Sample Above
(Only TARGETPANELCENTER DIVS(Containers) and their CSS)
Code:
<div id="TargetPanelCenter"
class="x-panel x-border-item x-box-item x-panel-default"
style="margin: 0px; right: auto; left: 130px; top: 24px; height: 698px; width: 1470px;">
<div id="TargetPanelCenter-bodyWrap"
class="x-panel-bodyWrap">
<div id="TargetPanelCenter-body"
class="x-panel-body x-panel-body-default x-panel-body-default"
style="left: 0px; top: 0px; height: 605px; width: 1320px;">
<div id="TargetPanelCenter-outerCt"
class="x-autocontainer-outerCt"
style="width: 100%; table-layout: fixed; height: 100%;">
<div id="TargetPanelCenter-innerCt"
style=""
class="x-autocontainer-innerCt">
<div id="TargetPanelCenterFit"
class="x-panel x-panel-default"
style="height: 36px;">
<div id="TargetPanelCenterFit-bodyWrap"
class="x-panel-bodyWrap">
<div id="TargetPanelCenterFit-body"
class="x-panel-body x-panel-body-default x-panel-body-default"
style="left: 0px; top: 0px; width: 1312px; height: 36px;">
<div id="TargetPanelCenterVbox"
class="x-panel x-fit-item x-panel-default"
style="margin: 0px; width: 1310px; height: 34px;">
<div id="TargetPanelCenterVbox-bodyWrap"
class="x-panel-bodyWrap">
<div id="TargetPanelCenterVbox-body"
class="x-panel-body x-panel-body-default x-box-layout-ct x-panel-body-default"
style="left: 0px; top: 0px; width: 1310px; height: 34px;">
<div id="TargetPanelCenterVbox-innerCt"
class="x-box-inner"
style="height: 32px; width: 1308px;">
<div id="TargetPanelCenterVbox-targetEl"
class="x-box-target"
style="width: 1308px;">
Computed HEIGHTS For the Specific DIVS from Rendering Above
Code:
TargetPanelCenter => 698px (inline)
TargetPanelCenter-bodyWrap => 100% (.x-panel-bodyWrap)
TargetPanelCenter-body => 698px (inline)
TargetPanelCenter-outerCt => 100% (inline)
TargetPanelCenter-innerCt => 100% (.x-autocontainer-innerCt)
TargetPanelCenterFit => 36px (inline)
TargetPanelCenterFit-bodyWrap => 100% (.x-panel-bodyWrap)
TargetPanelCenterFit-body => 36px (inline)
TargetPanelCenterVbox => 34px (inline)
TargetPanelCenterVbox-bodyWrap => 100% (.x-panel-bodyWrap)
TargetPanelCenterVbox-body => 34px (inline)
TargetPanelCenterVbox-innerCt => 32px (inline)
TargetPanelCenterVbox-targetEl => 0px (Inheritance in Inspector - x-box-target {min-height: 1px;})
Just from inspecting the rendered code:
I'm assuming there is some internal calculation of height (maybe using line height?) and this gets assigned to specific containers as they are being rendered (to their inline styles) and this calculated height sometimes gets propagated on down (child containers).
As I mentioned before we are upgrading a big project from version 1.2 to current 4.x
I know that there has been 'a million' changes but I expect at least that the new V4.x Layouts would work as expected.
Again, maybe I am overlooking something or doing something wrong -- but to me it seems there is a major bug in the way the different layout types handle vertical fit in the current version.
NOTE: I've had to resort to adding specific tag selectors in my CSS files with [HEIGHT: Inherit] property,
to get the this upgraded project to behave like original project with the old 1.2 controls.