[CLOSED] ColumnLayout Height 100%

[osef]

Hi team Ext.Net, How Can I do a panel with layout ColumnLayout in its height size 100% on my screen?

Thank you

[Daniil]

Hi @osef,

I would use a Viewport.

Example

<ext:Viewport runat="server" Layout="FitLayout">
    <Items>
        <ext:Panel runat="server" Layout="ColumnLayout">
            <Items>
                <%--the columns--%>
            </Items>
        </ext:Panel>
    </Items>
</ext:Viewport>

You also can set up ColumnLayout for the Viewport and put the columns directly to its Items.

[osef]

Daniil

The problem with this, is that my columns has the size in height for the content, but I want a size percent of 100% of my web page in de Panels with ColumnLayout.

    <ext:Viewport 
        ID="vpCompras"
        runat="server"
        Layout="ColumnLayout"
        Border="false">
        <Items>
                    <ext:Panel ID="Panel2"
                        runat="server"
                        ColumnWidth="0.2"
                        Title="Width=0.25"
                        Html="This is some content." />
                    <ext:Panel ID="Panel3"
                        runat="server"
                        ColumnWidth="0.7"
                        Title="Width=0.75"
                        Html="This is some content." />
                    <ext:Panel ID="Panel4"
                        runat="server"
                        Title="Width=250px"
                        ColumnWidth="0.1"
                        Html="This is some content." />
        </Items>
    </ext:Viewport>

This is not good.

[Daniil]

Then please use HBoxLayout.
https://examples2.ext.net/#/Layout/HBoxLayout/Basic/

With the Align="Stretch" option and Flex="1" for all columns.

[Daniil]

I forgot that you can set Flex="1" for the items in your example with ColumnLayout and these items will be stretched up to the whole height.

Though I would still recommend to use HBoxLayout. Because, we think that ColumnLayout can become deprecated in the future.