How to make fixed width, filled height panel?

Unity Engine
1

Hi, I’m trying to make fixed widht, filled height panel with UIElements and UXML layout, but I can’t figure out how I acheive that.

Here is my current code and screenshot (attached).

<?xml version="1.0" encoding="utf-8"?>
<UXML
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="UnityEngine.UIElements"
    xmlns:editor="UnityEditor.UIElements"
    xsi:noNamespaceSchemaLocation="../../../../../../../../../UIElementsSchema/UIElements.xsd"
    xsi:schemaLocation="
                        UnityEngine.UIElements ../../../../../../../../../UIElementsSchema/UnityEngine.UIElements.xsd
                        UnityEditor.UIElements ../../../../../../../../../UIElementsSchema/UnityEditor.UIElements.xsd">
    <editor:Toolbar>
        <editor:ToolbarButton name="selectToolbarButton" text="Move"/>
        <VisualElement style="flex-direction: row;">
            <Label text="Current Asset : " class="toolbar"/>
            <Label name="targetAssetLabel"  class="toolbar"/>
        </VisualElement>
    </editor:Toolbar>
    <VisualElement name="mainPanel" style="flex-direction: row; flex-grow: 1; flex-shrink: 1;">
        <Box name="leftPanel" style="width: 150px; flex-direction: column;">
            <Button text="AAA"/>
            <Button text="AAA"/>
            <Button text="AAA"/>
            <Button text="AAA"/>
            <Button text="AAA"/>
            <Button text="AAA"/>
        </Box>
        <Box name="rightPanel" style="flex-grow: 1; flex-direction: column;">
            <Button text="AAA"/>
        </Box>
    </VisualElement>
</UXML>

And my goal is that making left and right panel’s height to fill its parent (window) regardless of its contents.

Any Ideas? Thanks.

4826534--463019--UIElementsScreenshot1.png

2

Add ‘align-items: stretch;’ to the mainPanel.

3

@Stardog Thanks for reply. But seems that adding align-items: stretch; does not work. Result of my window is not changed.

4

@Stardog Oh my, I figured out that CloneTree() makes TemplateContainer which is not flex-filled container. I changed CloneTree() to CloneTree(target) for removing TemplateContainer and it works perfectly.

1 Like