[OPEN] [#1475] [4.2.0] What is the 4.2 version of the fix for this Old Forum Post

  1. #1

    [OPEN] [#1475] [4.2.0] What is the 4.2 version of the fix for this Old Forum Post

    What is the 4.2 version of the fix for this old Forum Post.

    Master Page with ContentPlaceHolder FitLayout Content not stretching

    https://forums.ext.net/showthread.ph...815#post281815


    I am having the same problems, but in version 4.2 ie. Center Panel asp:content not vertically expanding to 100%
    (we are currently upgrading a project from v1.2 to v4.2)
    Last edited by fabricio.murta; May 11, 2017 at 6:58 PM.
  2. #2
    Hello @Rafaelcjr! Welcome to Ext.NET forums!

    The code syntax can change significantly from 1.x to 4.x. That's a lot of changes in between. So can't really say that this even reproducible in 4.x. Must see how you tried to write the code before we can tell you what's wrong and how to deal with it.

    In other words, we'd need you to provide a simplified test case of how you are trying to port your page that did not work.

    Here are some threads you probably should review that will help you a lot to understand why this test case and how to come up with a good one.
    - Tips for creating simplified code samples

    Actually the test case provided in the thread you pointed may be fair enough. If you don't have ways to simplify the use cases you have on your real world application, you may just want to use that test case, try to make it work on 4.x. In case it doesn't, then you can post what you tried and we'll point you what should be done in order for that to work.

    You will probably be interested in reviewing some layout-related examples for version 4. A good beginning point would be here: Basic FitLayout. Well, this example using viewport might also help porting your old code to 4.x: Viewport built in Markup.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3

    BUG in HEIGHT for <CONTENT> Element

    Fabricio,
    Thank you for your quick reply.

    You pointed me to a FITLAYOUT Container example when I was trying to point (as the old forum post did) to a BORDERLAYOUT Parent element and its CENTER Region Container (or any Region Panel for that matter)

    But I think I have found the culprit -- it seems to be a "BUG" in the way EXT Controls renders out to the client when a <CONTENT> tag is used to wrap NON-EXT markup elements.

    Simple Explanation is that xxxx_Content DIV that is generated does not inherit height or have height set to 100%
    P.S. Maybe there is already a workaround for this that I am not aware of.

    A suggestion for a simple fix would be to have the 'idOfParentContainer'_Content DIV that gets Generated either have a inline HEIGHT=100% style similar to the "xxxxx-outerCt" DIV or for it to have CSS Class set to ".x-autocontainer-innerCt" same as the xxxxxx-innerCt DIV.


    Below are the Detailed Findings/Explanation.
    I Used the FITLAYOUT Basic Sample you pointed to in your response, but this bug occurs also inside a "CENTER" region container using <CONTENT> under a "BORDERLAYOUT" Parent.

    YOUR SAMPLE
    (From FITLAYOUT Basic)
    <ext:Viewport runat="server" Layout="Fit">
        <Items>
            <ext:Panel  ID="TargetPanel"
                        runat="server"
                        BodyPadding="15"
                        Html="This panel is fit 100% Height and 100% Width within its container."/>
        </Items>
    </ext:Viewport>
    Generated MarkUp (Only TARGETPANEL DIVS and their CSS) for Sample Above
    <div id="TargetPanel" 
        class="x-panel x-fit-item x-panel-default"  
        style="margin: 0px; width: 1211px; height: 466px;">
    
        <div id="TargetPanel-bodyWrap" 
             class="x-panel-bodyWrap" 
    
            <div id="TargetPanel-body" 
                class="x-panel-body x-panel-body-default x-panel-body-default" 
                style="padding: 0px; width: 1211px; height: 439px; left: 0px; top: 27px;
    
                <div id="TargetPanel-outerCt" 
                    class="x-autocontainer-outerCt" 
                    style="width: 100%; table-layout: fixed; height: 100%;"     
              
                    <div id="TargetPanel-innerCt" 
                        style="padding:15px 15px 15px 15px" 
                        class="x-autocontainer-innerCt">
    Computed HEIGHTS For the Specific TARGETPANEL DIVS for Sample Above
    TargetPanel => 466px (inline)
        TargetPanel-bodyWrap => 100% (.x-panel-bodyWrap)
            TargetPanel-body => 439px (inline)
                TargetPanel-outerCt => 100% (inline)
                    TargetPanel-innerCt => 100% (.x-autocontainer-innerCt)
    This works because HTML content is not Wrapped by <CONTENT> element which Renders a "xxxxx_Content" DIV

    ================================================== ================================================== =========

    YOUR SAMPLE Using <CONTENT>
    <%-- Doesn't matter if you use asp panel or  html div here --%>
    <ext:Viewport runat="server" Layout="Fit">
        <Items>
            <ext:Panel ID="TargetPanel"
                runat="server"
                BodyPadding="15">
    
                <Content>
                     <asp:Panel ID="Content_ASPPanel" runat="server" 
                          style="height:100%; border: 2px solid blue;">
                          
                        This panel is fit 100% Height and 100% Width within its container.
                    </asp:Panel>
                </Content>
            </ext:Panel>
        </Items>
    </ext:Viewport>
    Generated MarkUp (Only TARGETPANEL DIVS and their CSS)
    (SAME AS Original Sample But with two new elements)
    <div id="TargetPanel" 
        <div id="TargetPanel-bodyWrap" 
            <div id="TargetPanel-body" 
                <div id="TargetPanel-outerCt" 
                      <div id="TargetPanel-innerCt" 
            
                        <div id="TargetPanel_Content" 
                             class="">
                             
                             <div id="Content_ASPPanel" 
                                  style="height:100%; border: 2px solid blue;">
    Computed HEIGHTS For the Specific TARGETPANEL DIVS for Sample with CONTENT Above

    TargetPanel => 466px (inline)
        TargetPanel-bodyWrap => 100% (.x-panel-bodyWrap)
            TargetPanel-body => 466px (inline)
                TargetPanel-outerCt => 100% (inline)
                    TargetPanel-innerCt => 100% (.x-autocontainer-innerCt)
                        TargetPanel_Content => 20px  (????????????? NO HEIGHT REFERENCE Found in CSS Inspect)  
                            Content_ASPPanel => 100% (inline)
    The Above Sample ends up with 'ASPPanel' rendered DIV Expanding to 100% of Height of its parent TargetPanel_Content which is 20px
  4. #4
    Hello @Rafaelcjr!

    Thanks for your investigation in the matter.

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

    This thread's response is still actual to this concept and may help clarifying it: Items vs Content.

    So it is expected the YOUR SAMPLE Using <CONTENT> section from your post not to work the way you expected.

    I see you miss the FitLayout block that did this in Ext.NET 1.0, and that's missing since version 2, probably because it couldn't work in all situations.

    As for the sample using content, I found you could make the content fit to the screen's height, by giving the problematic div the "100%" style. And the following just works:

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form runat="server" id="fm1">
        <div>
            <ext:ResourceManager runat="server" />
            <ext:Viewport runat="server" Layout="Fit">
                <Items>
                    <ext:Panel ID="TargetPanel"
                        runat="server"
                        BodyPadding="15" >
                        <Listeners>
                            <AfterRender Handler="item.getContentTarget().getFirstChild().setHeight('100%');" />
                        </Listeners>
                        <Content>
                             <asp:Panel ID="Content_ASPPanel" runat="server" 
                                  style="height:100%; border: 2px solid blue;">
                          
                                This panel is fit 100% Height and 100% Width within its container.
                            </asp:Panel>
                        </Content>
                    </ext:Panel>
                </Items>
            </ext:Viewport>
        </div>
        </form>
    </body>
    </html>
    I agree there should be an easier way to tell that div should fit 100% height when bound to the container. Understand that the content enclosed by the <content/> block is rendered separately to the page, and when the panel is rendered, it is pulled inside the panel's body, as the thread linked above explains.

    Want to do it differently? Define your custom content somewhere else and pull it in the panel, like this:

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form runat="server" id="fm1">
        <div>
            <ext:ResourceManager runat="server" />
            <ext:Viewport runat="server" Layout="Fit">
                <Items>
                    <ext:Panel ID="TargetPanel"
                        runat="server"
                        BodyPadding="15"
                        ContentEl="Content_ASPPanel">
                    </ext:Panel>
                </Items>
            </ext:Viewport>
        </div>
        <asp:Panel ID="Content_ASPPanel" runat="server" 
            style="height:100%; border: 2px solid blue;" CssClass="x-hidden">
            This panel is fit 100% Height and 100% Width within its container.
        </asp:Panel>
        </form>
    </body>
    </html>
    ... or like this, if you want to keep the code tied to the panel:

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form runat="server" id="fm1">
        <div>
            <ext:ResourceManager runat="server" />
            <ext:Viewport runat="server" Layout="Fit">
                <Items>
                    <ext:Panel ID="TargetPanel"
                        runat="server"
                        BodyPadding="15"
                        ContentEl="Content_ASPPanel">
                    </ext:Panel>
                </Items>
                <HtmlBin>
                    <asp:Panel ID="Content_ASPPanel" runat="server" 
                        style="height:100%; border: 2px solid blue;" CssClass="x-hidden">
                        This panel is fit 100% Height and 100% Width within its container.
                    </asp:Panel>
                </HtmlBin>
            </ext:Viewport>
        </div>
        </form>
    </body>
    </html>
    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    But yes, you would be probably asking why there are no better ways to do this. So we've just logged this as a feature request under #1475 on github so that we can develop something that would make it easier for custom content to fit a container's body.

    But remember, once you start working with <content/>, the layout therein is entirely outside Ext.NET's domain. So if you are adding a <content> block with only Ext.NET components, use <items/> instead.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Continuous Scrolling - Elevate post from Community forum
    By schimkem in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 17, 2012, 1:42 PM
  2. Replies: 0
    Last Post: Aug 14, 2012, 2:54 PM
  3. Replies: 0
    Last Post: Aug 14, 2012, 2:48 PM
  4. Replies: 3
    Last Post: Jan 13, 2010, 3:07 AM
  5. Forum bug ?
    By LoreX75 in forum 1.x Help
    Replies: 0
    Last Post: Dec 11, 2009, 11:31 AM

Posting Permissions