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

VBOXLayout Not Behaving as I tought it would

  1. #1

    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:	4 
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:	5 
Size:	47.2 KB 
ID:	25000



    The Question is:
    Why the Flex panels do not expand inside the VboxLayout container for the second sample??
  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

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

Subscribe now to get the latest Ext.NET happenings in our newsletter.