Search Unity

How to make fixed width, filled height panel?

Discussion in 'UIElements' started by Kichang-Kim, Aug 6, 2019.

  1. Kichang-Kim

    Kichang-Kim

    Joined:
    Oct 19, 2010
    Posts:
    277
    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).
    Code (CSharp):
    1.  
    2. <?xml version="1.0" encoding="utf-8"?>
    3. <UXML
    4.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    5.     xmlns="UnityEngine.UIElements"
    6.     xmlns:editor="UnityEditor.UIElements"
    7.     xsi:noNamespaceSchemaLocation="../../../../../../../../../UIElementsSchema/UIElements.xsd"
    8.     xsi:schemaLocation="
    9.                        UnityEngine.UIElements ../../../../../../../../../UIElementsSchema/UnityEngine.UIElements.xsd
    10.                        UnityEditor.UIElements ../../../../../../../../../UIElementsSchema/UnityEditor.UIElements.xsd">
    11.     <editor:Toolbar>
    12.         <editor:ToolbarButton name="selectToolbarButton" text="Move"/>
    13.         <VisualElement style="flex-direction: row;">
    14.             <Label text="Current Asset : " class="toolbar"/>
    15.             <Label name="targetAssetLabel"  class="toolbar"/>
    16.         </VisualElement>
    17.     </editor:Toolbar>
    18.     <VisualElement name="mainPanel" style="flex-direction: row; flex-grow: 1; flex-shrink: 1;">
    19.         <Box name="leftPanel" style="width: 150px; flex-direction: column;">
    20.             <Button text="AAA"/>
    21.             <Button text="AAA"/>
    22.             <Button text="AAA"/>
    23.             <Button text="AAA"/>
    24.             <Button text="AAA"/>
    25.             <Button text="AAA"/>
    26.         </Box>
    27.         <Box name="rightPanel" style="flex-grow: 1; flex-direction: column;">
    28.             <Button text="AAA"/>
    29.         </Box>
    30.     </VisualElement>
    31. </UXML>
    32.  
    And my goal is that making left and right panel's height to fill its parent (window) regardless of its contents.

    Any Ideas? Thanks.
     

    Attached Files:

  2. Stardog

    Stardog

    Joined:
    Jun 28, 2010
    Posts:
    1,298
  3. Kichang-Kim

    Kichang-Kim

    Joined:
    Oct 19, 2010
    Posts:
    277
    @Stardog Thanks for reply. But seems that adding
    align-items: stretch;
    does not work. Result of my window is not changed.
     
  4. Kichang-Kim

    Kichang-Kim

    Joined:
    Oct 19, 2010
    Posts:
    277
    @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.
     
    Stardog likes this.