[CLOSED] Auto width/height not working for my layout

[jmcantrell]

This example closely mimics the same layout that's being used in my full page. The panel that is using <Content> instead of <Items> is where the master page ends and the content page begins.

When resizing the browser window, it doesn't update the widths of the left and right panels. I tried adding MonitorResize to TopPanel, and it kind of works, but the resizing is sporadic. Sometimes it gets it right, and others not.

Also, when expanding the panels, the height of the page doesn't change. The content just gets cut off at the original height.

        <script runat="server">        
        Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
            If Not IsPostBack And Not Ext.Net.X.IsAjaxRequest Then
                Dim r As New Random
                For Each p In LeftPanel.Items.Union(RightPanel.Items)
                    Dim count = r.Next(5, 600)
                    For i = 0 To count
                        p.Html &= "test "
                    Next
                Next
            End If
        End Sub
        
    </script>
    
    <ext:Viewport runat="server">
        <Items>


            <ext:BorderLayout runat="server">
                <Items>
                    <ext:Panel runat="server" Region="North" Height="100" Html="NORTH" />
                    <ext:Panel runat="server" Region="Center" AutoScroll="true">
                        <Content>
                            <ext:Panel ID="TopPanel" runat="server" Layout="ColumnLayout" Border="false" AutoScroll="true" Padding="20" AutoHeight="true">
                                <LayoutConfig>
                                    <ext:ColumnLayoutConfig FitHeight="false" />
                                </LayoutConfig>
                                <Items>
                
                                    <ext:Panel ID="LeftPanel" runat="server" ColumnWidth="0.5" Split="true" Border="false" Layout="RowLayout" AutoScroll="true" Padding="10">
                                        <Items>
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                        </Items>
                                    </ext:Panel>


                                    <ext:Panel ID="RightPanel" runat="server" ColumnWidth="0.5" Split="true" Border="false" Layout="RowLayout" AutoScroll="true" Padding="10">
                                        <Items>
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                            <ext:Panel runat="server" Title="TEST" Collapsible="true" Collapsed="true" AutoHeight="true" />
                                        </Items>
                                    </ext:Panel>


                                </Items>
                            </ext:Panel>
                        </Content>
                    </ext:Panel>
                </Items>
            </ext:BorderLayout>


        </Items>
    </ext:Viewport>

[Daniil]

Hi,

You should wrap the TopPanel in FitLayout control.

[jmcantrell]

Hi,

You should wrap the TopPanel in FitLayout control.

This fixed the problem with the width, but the auto height isn't working.

[Daniil]

Do you need the TopPanel Height to be changed accordingly expanding/collapsing of inner panels?

I think you should remove

Layout="RowLayout"

of the LeftPanel and RightPanel.

[jmcantrell]

Great. I think this is going to work. Thanks!