Search Unity

Expandable Container Height Issue

Discussion in 'UI Toolkit' started by PanagiotisKikas, Jul 15, 2021.

  1. PanagiotisKikas

    PanagiotisKikas

    Joined:
    Aug 23, 2019
    Posts:
    7
    Hello,
    So I am currently making a custom node view inside Unity's graph view system and it needs to have a section where you can insert other node views and it would group them. I have made a custom stack visual element in which you can insert other node views and it expands correctly to fit those nodes. The problem arises when I add this custom stack view in one of my node's containers, where the height of the node's parent container is always 0 while the child stack view is expanding. Because of that my node's heigh isn't expanding and the stack view is hidden.

    upload_2021-7-15_23-1-1.png

    I've set the group's container height to auto and it is supposed to change its height in order to include the children's visual elements but that doesn't seem to work. The parent group container, in this case, is the group container and its height always stays at 0 even though the stack node view (child) is expanding.

    This is how it should appear:
    upload_2021-7-15_23-4-29.png

    Any ideas on how to fix that?
    Thanks
     
    Last edited: Jul 16, 2021
    PanagiotisKikas, Jul 15, 2021
    #1

  2. uMathieu

    uMathieu

    Unity Technologies

    Joined:
    Jun 6, 2017
    Posts:
    398
    Without having the project running locally, it can be hard to track these kind of issues. On thing that comes to mind is, in order for the container height to include it's children, they need to use position:relative. Having position:absolute doesn't add any constraints on a parent's size and it will likely be collapsed to 0.
     
    uMathieu, Jul 20, 2021
    #2
    PanagiotisKikas and Robert_Luminous like this.

  3. PanagiotisKikas

    PanagiotisKikas

    Joined:
    Aug 23, 2019
    Posts:
    7
    That was it setting the position of the stack view to relative seems to fix the issue and the container expands! But now I am having another issue where the position style is never applied and always stays absolute. I've tried changing it from the USS and even setting it up directly from a C# class but it always stays absolute along with an (inline) tag after it even though I can see my matching selectors and changes from the UI Toolkit Debugger.

    This is the UXML of the element along with the USS file

    Code (CSharp):
    1. <UXML xmlns:ui="UnityEngine.UIElements">
    2.   <ui:VisualElement name="groupContainer">
    3.     <CustomStackNodeView class="stack-node NodeStackView">
    4.       <GrabObjectNodeView class="graphElement node expanded stack-child__0 stack-child-element">
    5.         <ui:VisualElement name="input-container">
    6.           <ui:VisualElement name="executed" class="port-input-element empty" />
    7.         </ui:VisualElement>
    8.         <ui:VisualElement name="TopPortContainer" />
    9.         <ui:VisualElement name="node-border">
    10.           <ui:VisualElement name="title">
    11.             <ui:Label name="title-label" text="Grab Object" class="unity-text-element unity-label" />
    12.             <ui:VisualElement name="title-button-container">
    13.               <ui:VisualElement name="collapse-button">
    14.                 <ui:VisualElement name="icon" />
    15.               </ui:VisualElement>
    16.             </ui:VisualElement>
    17.             <ui:VisualElement name="RightTitleContainer">
    18.               <ui:VisualElement class="AssessmentToggleContainer">
    19.                 <ui:Label text="T" class="unity-text-element unity-label" />
    20.                 <ui:Toggle class="unity-base-field unity-base-field--no-label unity-toggle unity-toggle--no-text">
    21.                   <ui:VisualElement class="unity-base-field__input unity-toggle__input">
    22.                     <ui:VisualElement name="unity-checkmark" class="unity-toggle__checkmark" />
    23.                   </ui:VisualElement>
    24.                 </ui:Toggle>
    25.               </ui:VisualElement>
    26.               <ui:VisualElement class="AssessmentToggleContainer">
    27.                 <ui:Label text="P" class="unity-text-element unity-label" />
    28.                 <ui:Toggle class="unity-base-field unity-base-field--no-label unity-toggle unity-toggle--no-text">
    29.                   <ui:VisualElement class="unity-base-field__input unity-toggle__input">
    30.                     <ui:VisualElement name="unity-checkmark" class="unity-toggle__checkmark" />
    31.                   </ui:VisualElement>
    32.                 </ui:Toggle>
    33.               </ui:VisualElement>
    34.               <ui:VisualElement class="AssessmentToggleContainer">
    35.                 <ui:Label text="A" class="unity-text-element unity-label" />
    36.                 <ui:Toggle class="unity-base-field unity-base-field--no-label unity-toggle unity-toggle--no-text">
    37.                   <ui:VisualElement class="unity-base-field__input unity-toggle__input">
    38.                     <ui:VisualElement name="unity-checkmark" class="unity-toggle__checkmark" />
    39.                   </ui:VisualElement>
    40.                 </ui:Toggle>
    41.               </ui:VisualElement>
    42.             </ui:VisualElement>
    43.             <ui:Label class="unity-text-element unity-label" />
    44.           </ui:VisualElement>
    45.           <ui:VisualElement name="contents">
    46.             <ui:VisualElement name="divider" class="horizontal" />
    47.             <ui:VisualElement name="top">
    48.               <ui:VisualElement name="input">
    49.                 <PortView class="port input executed Port_ExecutionLink">
    50.                   <ui:VisualElement name="connector" class="connectorBox">
    51.                     <ui:VisualElement name="cap" class="connectorCap" />
    52.                   </ui:VisualElement>
    53.                   <ui:Label name="type" text="Execute" class="unity-text-element unity-label connectorText" />
    54.                 </PortView>
    55.               </ui:VisualElement>
    56.               <ui:VisualElement name="divider" class="vertical" />
    57.               <ui:VisualElement name="output">
    58.                 <PortView class="output port executes Port_ExecutionLink">
    59.                   <ui:VisualElement name="connector" class="connectorBox">
    60.                     <ui:VisualElement name="cap" class="connectorCap" />
    61.                   </ui:VisualElement>
    62.                   <ui:Label name="type" text="Complete" class="unity-text-element unity-label connectorText" />
    63.                 </PortView>
    64.                 <PortView class="output port OnStartActions Port_ActionLink">
    65.                   <ui:VisualElement name="connector" class="connectorBox">
    66.                     <ui:VisualElement name="cap" class="connectorCap" />
    67.                   </ui:VisualElement>
    68.                   <ui:Label name="type" text="Start Actions" class="unity-text-element unity-label connectorText" />
    69.                 </PortView>
    70.                 <PortView class="output port OnFinishActions Port_ActionLink">
    71.                   <ui:VisualElement name="connector" class="connectorBox">
    72.                     <ui:VisualElement name="cap" class="connectorCap" />
    73.                   </ui:VisualElement>
    74.                   <ui:Label name="type" text="Complete Actions" class="unity-text-element unity-label connectorText" />
    75.                 </PortView>
    76.               </ui:VisualElement>
    77.             </ui:VisualElement>
    78.           </ui:VisualElement>
    79.           <ui:VisualElement name="controls" class="NodeControls">
    80.             <PropertyField name="IsSkipPoint" class="unity-property-field">
    81.               <ui:Toggle name="unity-input-nodes.Array.data[6].IsSkipPoint" class="unity-base-field unity-toggle unity-toggle--no-text">
    82.                 <ui:Label text="Is Skip Point" class="unity-text-element unity-label unity-base-field__label unity-toggle__label unity-property-field__label" />
    83.                 <ui:VisualElement class="unity-base-field__input unity-toggle__input unity-property-field__input">
    84.                   <ui:VisualElement name="unity-checkmark" class="unity-toggle__checkmark" />
    85.                 </ui:VisualElement>
    86.               </ui:Toggle>
    87.             </PropertyField>
    88.             <ObjectField class="unity-base-field unity-object-field">
    89.               <ui:Label text="Object to grab" class="unity-text-element unity-label unity-base-field__label unity-object-field__label" />
    90.               <ui:VisualElement class="unity-base-field__input unity-object-field__input">
    91.                 <ObjectFieldDisplay class="unity-object-field-display unity-object-field__object">
    92.                   <ui:Image class="unity-image unity-object-field-display__icon" />
    93.                   <ui:Label text="None (Grabbable Component)" class="unity-text-element unity-label unity-object-field-display__label" />
    94.                 </ObjectFieldDisplay>
    95.                 <ObjectFieldSelector class="unity-object-field__selector" />
    96.               </ui:VisualElement>
    97.             </ObjectField>
    98.           </ui:VisualElement>
    99.         </ui:VisualElement>
    100.         <ui:VisualElement name="selection-border" />
    101.         <ui:VisualElement name="BottomPortContainer" />
    102.       </GrabObjectNodeView>
    103.       <GrabObjectNodeView class="graphElement node expanded stack-child__1 stack-child-element">
    104.         <ui:VisualElement name="input-container">
    105.           <ui:VisualElement name="executed" class="port-input-element empty" />
    106.         </ui:VisualElement>
    107.         <ui:VisualElement name="TopPortContainer" />
    108.         <ui:VisualElement name="node-border">
    109.           <ui:VisualElement name="title">
    110.             <ui:Label name="title-label" text="Grab Object" class="unity-text-element unity-label" />
    111.             <ui:VisualElement name="title-button-container">
    112.               <ui:VisualElement name="collapse-button">
    113.                 <ui:VisualElement name="icon" />
    114.               </ui:VisualElement>
    115.             </ui:VisualElement>
    116.             <ui:VisualElement name="RightTitleContainer">
    117.               <ui:VisualElement class="AssessmentToggleContainer">
    118.                 <ui:Label text="T" class="unity-text-element unity-label" />
    119.                 <ui:Toggle class="unity-base-field unity-base-field--no-label unity-toggle unity-toggle--no-text">
    120.                   <ui:VisualElement class="unity-base-field__input unity-toggle__input">
    121.                     <ui:VisualElement name="unity-checkmark" class="unity-toggle__checkmark" />
    122.                   </ui:VisualElement>
    123.                 </ui:Toggle>
    124.               </ui:VisualElement>
    125.               <ui:VisualElement class="AssessmentToggleContainer">
    126.                 <ui:Label text="P" class="unity-text-element unity-label" />
    127.                 <ui:Toggle class="unity-base-field unity-base-field--no-label unity-toggle unity-toggle--no-text">
    128.                   <ui:VisualElement class="unity-base-field__input unity-toggle__input">
    129.                     <ui:VisualElement name="unity-checkmark" class="unity-toggle__checkmark" />
    130.                   </ui:VisualElement>
    131.                 </ui:Toggle>
    132.               </ui:VisualElement>
    133.               <ui:VisualElement class="AssessmentToggleContainer">
    134.                 <ui:Label text="A" class="unity-text-element unity-label" />
    135.                 <ui:Toggle class="unity-base-field unity-base-field--no-label unity-toggle unity-toggle--no-text">
    136.                   <ui:VisualElement class="unity-base-field__input unity-toggle__input">
    137.                     <ui:VisualElement name="unity-checkmark" class="unity-toggle__checkmark" />
    138.                   </ui:VisualElement>
    139.                 </ui:Toggle>
    140.               </ui:VisualElement>
    141.             </ui:VisualElement>
    142.             <ui:Label class="unity-text-element unity-label" />
    143.           </ui:VisualElement>
    144.           <ui:VisualElement name="contents">
    145.             <ui:VisualElement name="divider" class="horizontal" />
    146.             <ui:VisualElement name="top">
    147.               <ui:VisualElement name="input">
    148.                 <PortView class="port input executed Port_ExecutionLink">
    149.                   <ui:VisualElement name="connector" class="connectorBox">
    150.                     <ui:VisualElement name="cap" class="connectorCap" />
    151.                   </ui:VisualElement>
    152.                   <ui:Label name="type" text="Execute" class="unity-text-element unity-label connectorText" />
    153.                 </PortView>
    154.               </ui:VisualElement>
    155.               <ui:VisualElement name="divider" class="vertical" />
    156.               <ui:VisualElement name="output">
    157.                 <PortView class="output port executes Port_ExecutionLink">
    158.                   <ui:VisualElement name="connector" class="connectorBox">
    159.                     <ui:VisualElement name="cap" class="connectorCap" />
    160.                   </ui:VisualElement>
    161.                   <ui:Label name="type" text="Complete" class="unity-text-element unity-label connectorText" />
    162.                 </PortView>
    163.                 <PortView class="output port OnStartActions Port_ActionLink">
    164.                   <ui:VisualElement name="connector" class="connectorBox">
    165.                     <ui:VisualElement name="cap" class="connectorCap" />
    166.                   </ui:VisualElement>
    167.                   <ui:Label name="type" text="Start Actions" class="unity-text-element unity-label connectorText" />
    168.                 </PortView>
    169.                 <PortView class="output port OnFinishActions Port_ActionLink">
    170.                   <ui:VisualElement name="connector" class="connectorBox">
    171.                     <ui:VisualElement name="cap" class="connectorCap" />
    172.                   </ui:VisualElement>
    173.                   <ui:Label name="type" text="Complete Actions" class="unity-text-element unity-label connectorText" />
    174.                 </PortView>
    175.               </ui:VisualElement>
    176.             </ui:VisualElement>
    177.           </ui:VisualElement>
    178.           <ui:VisualElement name="controls" class="NodeControls">
    179.             <PropertyField name="IsSkipPoint" class="unity-property-field">
    180.               <ui:Toggle name="unity-input-nodes.Array.data[4].IsSkipPoint" class="unity-base-field unity-toggle unity-toggle--no-text">
    181.                 <ui:Label text="Is Skip Point" class="unity-text-element unity-label unity-base-field__label unity-toggle__label unity-property-field__label" />
    182.                 <ui:VisualElement class="unity-base-field__input unity-toggle__input unity-property-field__input">
    183.                   <ui:VisualElement name="unity-checkmark" class="unity-toggle__checkmark" />
    184.                 </ui:VisualElement>
    185.               </ui:Toggle>
    186.             </PropertyField>
    187.             <ObjectField class="unity-base-field unity-object-field">
    188.               <ui:Label text="Object to grab" class="unity-text-element unity-label unity-base-field__label unity-object-field__label" />
    189.               <ui:VisualElement class="unity-base-field__input unity-object-field__input">
    190.                 <ObjectFieldDisplay class="unity-object-field-display unity-object-field__object">
    191.                   <ui:Image class="unity-image unity-object-field-display__icon" />
    192.                   <ui:Label text="GrabCube2 (Grabbable Component)" class="unity-text-element unity-label unity-object-field-display__label" />
    193.                 </ObjectFieldDisplay>
    194.                 <ObjectFieldSelector class="unity-object-field__selector" />
    195.               </ui:VisualElement>
    196.             </ObjectField>
    197.           </ui:VisualElement>
    198.         </ui:VisualElement>
    199.         <ui:VisualElement name="selection-border" />
    200.         <ui:VisualElement name="BottomPortContainer" />
    201.       </GrabObjectNodeView>
    202.     </CustomStackNodeView>
    203.   </ui:VisualElement>
    204. </UXML>
    Code (CSharp):
    1. TextField > TextInput
    2. {
    3.     white-space: normal;  
    4.     max-width: 142px;
    5. }
    6.  
    7. Label
    8. {
    9.     color : yellow;
    10. }
    11.  
    12. .Highlight {
    13.     border-width: 0.5px;
    14.     border-color: yellow;
    15. }
    16.  
    17. .RelayColor #title
    18. {
    19.     background-color: rgba(170, 51, 106, 1);
    20. }
    21.  
    22. #groupContainer
    23. {  
    24.     min-width: 300px;
    25.     display: flex;
    26.     flex-direction: column;
    27.     height: auto;
    28.     position: relative;
    29. }
    30.  
    31. .NodeStackView{
    32. position: relative;
    33. }
    34.  
    35. .node{
    36.     max-width: 330px;
    37. }
    38.  
    39. .AndGroupNode CustomStackNodeView
    40. {
    41. background-color: rgba(40, 40, 40, 0.7);
    42.  
    43. }
    44.  
    45.  
    46. #stackNodeContentContainer
    47. {
    48.     justify-content: space-between;  
    49. }
    50.  
    51. .node .stack-child-element
    52. {
    53.     margin-top: 10px;
    54.     margin-bottom: 10px;
    55. }
     
    PanagiotisKikas, Jul 21, 2021
    #3

  4. uMathieu

    uMathieu

    Unity Technologies

    Joined:
    Jun 6, 2017
    Posts:
    398
    c# code somewhere must be setting it in the inline styles. Once inlined, that value override anything that comes from uss. To change it, use myElement.style.position = Position.Relative;
     
    uMathieu, Jul 22, 2021
    #4

  5. PanagiotisKikas

    PanagiotisKikas

    Joined:
    Aug 23, 2019
    Posts:
    7
    This is exactly what I did, I set the position of the stackview element to relative (which would solve my expansion issue) using stackView.style.position = Position.Relative; but the position stays absolute
     
    PanagiotisKikas, Jul 22, 2021
    #5

  6. PanagiotisKikas

    PanagiotisKikas

    Joined:
    Aug 23, 2019
    Posts:
    7
    Managed to fix the issue by changing the style of the stack view after the stack view is initialized. I am guessing that something in the initializer changed the position of the stack view back to absolute.
    Thanks for your input.
    - Resolved
     
    PanagiotisKikas, Jul 28, 2021
    #6