[CLOSED] Problem/Bug with Layouts -- Specifically: Vertical Height Fit

  1. #1

    [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:
    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:
    <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)
    Click image for larger version. 

Name:	ExpectedResults.png 
Views:	124 
Size:	40.9 KB 
ID:	24952


    This is what I Currently Get.
    Click image for larger version. 

Name:	ActualResults.png 
Views:	133 
Size:	43.3 KB 
ID:	24951



    Below are the Details of Rendering from Sample Above
    (Only TARGETPANELCENTER DIVS(Containers) and their CSS)
    <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
    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.
    Last edited by fabricio.murta; Jul 14, 2017 at 4:42 PM.
  2. #2
    Not sure what happened to picture Attachments in the previous post

    Expected Results
    Click image for larger version. 

Name:	ExpectedResults.png 
Views:	124 
Size:	40.9 KB 
ID:	24952

    Actual Results
    Click image for larger version. 

Name:	ActualResults.png 
Views:	133 
Size:	43.3 KB 
ID:	24951
  3. #3
    Hello @Rafaelcjr!

    Two considerations on your test case:

    1. You left a panel without FitLayout
    2. If you define a layout inside a LayoutConfig block, you must not to specify it in the ext:Panel tag.

    That said, to make the page work as you suggested in the screenshot:

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <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" Layout="FitLayout">
                        <Items>
                            <ext:Panel ID="TargetPanelCenterFit" runat="server" Layout="FitLayout">
                                <Items>
                                    <ext:Panel ID="TargetPanelCenterVbox" runat="server">
                                        <LayoutConfig>
                                            <ext:VBoxLayoutConfig Align="Left" 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>
    Hope this helps you understand a little more the layout concept. It can really get confusing as you get more complex scenarios, and some layouts won't fit while others do, so trying with the different layouts most of the times helps finding what best fits.

    I personally found it better to debug this issue removing all your custom styling and iteractively giving the panels borders with StyleSpec="border: 1px solid red" on each individual panel, so I can be sure which one was not getting the full size. What probably got you confused is that you given a panel a FitLayout while you were expecting IT to fit the contents. No, the FitLayout in the panel will make its contents fit to the panel size -- and that should be only one single item inside the panel.

    If you want to use a borderless, titleless panel, I'd suggest using a more lightweight component like ext:Container.

    Oh, another note is, I hope you don't expect your asp:panel (or label code inside Html="" to be expanded at all. They are just "textual invalid tags" that gets ignored by the browser on load. You can check that from your browser's DOM explorer, the <asp:panel runat="server" text on the rendered page (what is not expected at all when a control is run from server-side).

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  4. #4
    fabricio
    Thank you for your quick reply and invaluable help.

    I knew I was doing something wrong. After following your advise/recommendations, the above sample worked perfectly (as expected).
    • I was under impression that you couldn't have Region and Layout defined on same control (I probably got an error (while experimenting) when I set a LAYOUT on a REGION panel - but now I think it has to do with <content>)
    • I tought the FITLAYOUT affected all child items and subchildren - now I know I have to set FITLAYOUT again if panels are wrapped
    • Yes, I made the mistake of copy/pasting ASP in the HTML attribute - I changed the sample on my end to use ContentEl and HTMLBIN (as previous (referenced) forum post response recommended and it works perfectly)



    My current problem now is the use of asp Master pages (and nested Master pages).
    It seems that EXT controls do not work good with the [asp:ContentPlaceHolder]s used in master pages
    I cannot put the ContentPlaceHolder markup inside an HTMLBIN with ContentEl (so that rendered markup is within ext rendered div)

    I have to do it like sample shown below.
    But this is what starts trouble with Vertical Height Fitting of containers,
    since I cannot define a layout for a panel/container that does not have items

    Any Suggestions??
    <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>
  5. #5
    Hello @Rafaelcjr!

    Glad the last post helped you fix the issue you were having.

    I think your follow-up though deviates a bit off the initial thread topic. Would you mind opening a new thread so we can talk about that?

    It does not mean I didn't read your inquiry at all. Well, in fact, I am afraid there's not enough there to help you with the issue you are having. As I could infer, it would involve a Master page, then a content placeholder on it, and then a slave page with some panels and content...

    Usually mixing up ASP.NET native controls with Ext.NET controls might bring some unexpected scenarios as Ext.NET components are optimized to work with other Ext.NET components, and they can't scale for every other frameworks, even thinking ASP.NET as a "basic" framework. Still it opens a lot of nesting possibilities that goes beyond what was thought of while writing the JavaScript components. Bear in mind that the original ExtJS which Ext.NET is based off is ASP.NET-independent.

    That said, if you go ahead in the new thread, please make a runnable and simple enough test case to reproduce the issue. Don't hesitate to search forums to other issues involving master pages and layout (google for something like site:forums.ext.net master page broken layout for example) and also review our Tips for creating simplified code samples.

    Hope this helps!

    EDIT: Okay, I see you've created the said thread under Master Pages Sample - Content Height (and Responsive Design) Problem, and it looks good and simplified to narrow down to your scenario. If we have a good idea about that, we'll post a follow-up there. Thanks you!
    Last edited by fabricio.murta; May 17, 2017 at 9:07 PM.

Similar Threads

  1. Page scrolling problem with border layouts
    By rashidsiddique in forum 2.x Help
    Replies: 0
    Last Post: Jul 17, 2014, 3:37 AM
  2. Replies: 10
    Last Post: Nov 18, 2013, 11:56 PM
  3. [CLOSED] Window Height and Layouts
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 04, 2012, 1:39 PM
  4. Vertical Auto Height
    By Zdenek in forum 1.x Help
    Replies: 5
    Last Post: Dec 01, 2011, 8:34 PM
  5. Replies: 2
    Last Post: Mar 04, 2011, 11:54 AM

Tags for this Thread

Posting Permissions