View Full Version : [CLOSED] Vbox and hbox layout not resizing to fill screen

Nov 20, 2014, 3:31 PM
Trying to use a combination of vbox and hbox layout to effectively have a "table" layout that resizes to the extents of the browser window. The end component will be in a control so I have coded the example that way. The result sizes to the width of the browser initially but then does not stretch/resize horizontally or vertically and nothing seems to stretch vertically.

Container page:

<%@ Page Language="vb" %>
<%@ Register TagName="uc" TagPrefix="alloc" Src="TestLayoutControl.ascx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<ext2:ResourceManager ID="ResourceManager" runat="server" />

<form id="form1" runat="server">

<ext2:Panel Flex="1" runat="server" Title="Define Allocation" Layout="vboxlayout" >
<ext2:VBoxLayoutConfig Pack="Center" Align="Stretch"></ext2:VBoxLayoutConfig>
<alloc:uc runat="server" ID="controlAllocations" />


Control page:

<%@ Control Language="vb" %>

<ext2:Panel runat="server" Layout="VBoxLayout">
<ext2:VBoxLayoutConfig Align="Stretch" />
<ext2:Panel Flex="1" runat="server" Layout="HBoxLayout">
<ext2:HBoxLayoutConfig Align="Stretch"></ext2:HBoxLayoutConfig>
<ext2:Panel Flex="1" runat="server" ID="pnlAllocationChart" Title="Allocation Chart" ></ext2:Panel>
<ext2:Panel Flex="1" runat="server" ID="pnlDetails" Title="Allocation Details"></ext2:Panel>
<ext2:Panel Flex="1" runat="server" ID="pnlAllocationGrid" Title="Allocation Grid">
<ext2:GridPanel runat="server" ID="grdAllocations">
<ext2:Store runat="server" ID="StoreAllocations">
<ext2:ModelField Name="ID"></ext2:ModelField>
<ext2:ModelField Name="Description"></ext2:ModelField>
<ext2:Column runat="server" ID="colID" DataIndex="ID"></ext2:Column>
<ext2:Column runat="server" ID="colDescription" DataIndex="Description"></ext2:Column>

Nov 20, 2014, 6:07 PM
Hi @rmelancon,

I think you should use a Viewport as a top level container inside <form>. It automatically sizes itself to take all viewable space.