Search Unity

  1. Good news ✨ We have more Unite Now videos available for you to watch on-demand! Come check them out and ask our experts any questions!
    Dismiss Notice
  2. Ever participated in one our Game Jams? Want pointers on your project? Our Evangelists will be available on Friday to give feedback. Come share your games with us!
    Dismiss Notice

How to make fixed width, filled height panel?

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

  1. Kichang-Kim

    Kichang-Kim

    Joined:
    Oct 19, 2010
    Posts:
    513
    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,532
  3. Kichang-Kim

    Kichang-Kim

    Joined:
    Oct 19, 2010
    Posts:
    513
    @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:
    513
    @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.
unityunity