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

Threaded View

Previous Post Previous Post   Next Post Next Post
  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.

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