The official release of Ext.NET Mobile is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read More

[CLOSED] VBOXLayout Not Behaving as I tought it would

  1. #1

    [CLOSED] VBOXLayout Not Behaving as I tought it would

    Your sample for setting a "ROWS" layout with VBoxLayout is shown below, It Works Fine.
    http://examples.ext.net/#/Layout/VBoxLayout/Rows/
    <body>
        <ext:ResourceManager runat="server" />
    
        <ext:Viewport runat="server" Layout="VBoxLayout">
            <LayoutConfig>
                <ext:VBoxLayoutConfig Align="Stretch" />
            </LayoutConfig>
            <Items>
                <ext:Panel runat="server" Title="Initial Height = 25%" Flex="1" />
                <ext:Panel runat="server" Title="Initial Height = 100px" Height="100" />
                <ext:Panel runat="server" Title="Initial Height = 75%" Flex="3" />
            </Items>
        </ext:Viewport>
    </body>
    This is how this "Original Sample" Renders
    Click image for larger version. 

Name:	VBOXLayoutSamples_Render.png 
Views:	6 
Size:	40.6 KB 
ID:	24999


    ================================================== ==========================
    Now I took this sample and made a simple change (code shown below)
    Moved the VBOXLAYOUT container to a Panel inside the Viewport
    (Note: I changed titles to visualize the props set and also added borders)
    <body>
        <ext:ResourceManager runat="server" />
        <ext:Viewport ID="MainViewPort" runat="server">
            <Items>
                <ext:Panel ID="VBoxPanel" runat="server" Layout="VBoxLayout">
                    <LayoutConfig>
                        <ext:VBoxLayoutConfig  Align="Stretch"/>
                    </LayoutConfig>
                    <Items>
                        <ext:Panel runat="server" Title="Flex=1" Flex="1" BodyStyle="border:2px dashed blue;" />
                        <ext:Panel runat="server" Title="Height=100 No Flex" Height="100"  BodyStyle="border:2px dotted green;" />
                        <ext:Panel runat="server" Title="Flex=3" Flex="3" BodyStyle="border:2px dashed purple;" />
                    </Items>
                </ext:Panel>
           </Items>
        </ext:Viewport>
    </body>
    This is how this "Slightly Changed Sample" Renders
    Click image for larger version. 

Name:	Vboxlayout_AlteredSample.png 
Views:	6 
Size:	47.2 KB 
ID:	25000



    The Question is:
    Why the Flex panels do not expand inside the VboxLayout container for the second sample??
    Last edited by fabricio.murta; Jul 17, 2017 at 5:26 PM.
  2. #2
    Hello @Rafaelcjr!

    You probably want to either:
    - remove the outer panel

    <body>
        <ext:ResourceManager runat="server" />
        <ext:Viewport ID="MainViewPort" runat="server">
            <LayoutConfig>
                <ext:VBoxLayoutConfig  Align="Stretch"/>
            </LayoutConfig>
            <Items>
                <ext:Panel runat="server" Title="Flex=1" Flex="1" BodyStyle="border:2px dashed blue;" />
                <ext:Panel runat="server" Title="Height=100 No Flex" Height="100"  BodyStyle="border:2px dotted green;" />
                <ext:Panel runat="server" Title="Flex=3" Flex="3" BodyStyle="border:2px dashed purple;" />
           </Items>
        </ext:Viewport>
    </body>
    - give the viewport a layout setting so that the outer panel occupies fullscreen

    <body>
        <ext:ResourceManager runat="server" />
        <ext:Viewport ID="MainViewPort" runat="server" Layout="FitLayout">
            <Items>
                <ext:Panel ID="VBoxPanel" runat="server" Layout="VBoxLayout">
                    <LayoutConfig>
                        <ext:VBoxLayoutConfig  Align="Stretch"/>
                    </LayoutConfig>
                    <Items>
                        <ext:Panel runat="server" Title="Flex=1" Flex="1" BodyStyle="border:2px dashed blue;" />
                        <ext:Panel runat="server" Title="Height=100 No Flex" Height="100"  BodyStyle="border:2px dotted green;" />
                        <ext:Panel runat="server" Title="Flex=3" Flex="3" BodyStyle="border:2px dashed purple;" />
                    </Items>
                </ext:Panel>
           </Items>
        </ext:Viewport>
    </body>
    Or else unexpected layout issues will happen. Notice that the viewport is but a container that fits the whole viewable browser area (thus the name 'viewport').

    In fact, by default the ViewPort is but at VBox layout, so the panel immediately inside just does not get the full height of the screen, resulting in what you've seen. And what you probably didn't see is that the 'flex' setting had but no effect in both upper and lower panels. If you give the outer panel (immediately inside the viewport) this setting, you would understand what I'm talking about:

    StyleSpec="border: 2px solid red"
    Notice how the red border will be immediately below the lower panel's title, as the panel got no height as well.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello @rafaelcjr!

    It's been a while since we last posted here, but still no feedback from you. Did the last post help you at all, or do you happen to still need clarification regarding the layout issue you reported when opening this thread?

    We'll leave this thread open for an additional 7 days from now at least. If you don't post back in the meanwhile we'll assume you don't need further help with this and will be marking this thread as closed. This won't prevent you from posting afterwards anyway, so don't worry.
    Fabrício Murta
    Developer & Support Expert
  4. #4
    Fabricio, sorry for the delay in response.
    Your solution works perfectly - You can mark this as RESOLVED ( CLOSED)

    I am slowly getting the gist of these layouts - makes sense that the Parent container would have to be implemented with a Layout to make the inner panel layout work. I am assuming that most 'outer' panels would usually require a FITLAYOUT to make sure that the entire area will be used by whatever layout the internal container has.
  5. #5
    Hello @Rafaelcjr!

    Thanks for your feedback, and glad it helped you!..

    Note that the FitLayout won't do if you want, for example, add two panels inside its surroundings. FitLayout fits but one component. When you have more than one, some keywords you should consider exploring are Flex, Stretch, Region, WidthSpec/HeightSpec (like 100%, 50%) and Anchor.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 9
    Last Post: Jul 08, 2015, 12:04 PM
  2. Replies: 0
    Last Post: May 05, 2015, 2:13 PM
  3. Replies: 1
    Last Post: May 05, 2015, 10:02 AM
  4. Replies: 10
    Last Post: Jan 08, 2013, 4:08 PM
  5. [CLOSED] form.DefaultButton behaving different under FF
    By randy85253 in forum 1.x Premium Help
    Replies: 1
    Last Post: Dec 15, 2009, 11:01 AM

Tags for this Thread

Posting Permissions