Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Question How do I resize a list view to content?

Discussion in 'UI Toolkit' started by MadWatch, Apr 1, 2022.

  1. MadWatch

    MadWatch

    Joined:
    May 26, 2016
    Posts:
    112
    So I created a list view and I want its size to adjust to its content. Seems simple enough but I can't figure out how to do it.

    If I set flex-grow to 1 then the list take the entire window.
    Grow1.png

    If I set flex-grow to 0 then the list is completely shrieked and the content is not visible. Grow0.png

    If I create a dummy element below the list view then the space is equally divided between the two.
    Spacer.png

    How am I supposed to do it then?
    Thanks.
     
  2. AlexandreT-unity

    AlexandreT-unity

    Unity Technologies

    Joined:
    Feb 1, 2018
    Posts:
    358
    On which item did you set the flex-grow to 0? When I try this sample, it seems to work as you would expect it to:
    Code (CSharp):
    1.  
    2. using System;
    3. using System.Collections.Generic;
    4. using UnityEditor;
    5. using UnityEngine;
    6. using UnityEngine.UIElements;
    7.  
    8. public class ListViewExampleWindow : EditorWindow
    9. {
    10.     [MenuItem("Window/ListViewExampleWindow")]
    11.     public static void OpenDemoManual()
    12.     {
    13.         GetWindow<ListViewExampleWindow>().Show();
    14.     }
    15.  
    16.     public void OnEnable()
    17.     {
    18.         const int itemCount = 10;
    19.         var items = new List<string>(itemCount);
    20.         for (int i = 1; i <= itemCount; i++)
    21.             items.Add(i.ToString());
    22.  
    23.         Func<VisualElement> makeItem = () => new Label();
    24.         Action<VisualElement, int> bindItem = (e, i) => (e as Label).text = items[i];
    25.         const int itemHeight = 16;
    26.         var listView = new ListView(items, itemHeight, makeItem, bindItem);
    27.         listView.style.flexGrow = 0;
    28.         listView.style.borderLeftWidth = 2;
    29.         listView.style.borderLeftColor = Color.red;
    30.         rootVisualElement.Add(listView);
    31.  
    32.         rootVisualElement.Add(new VisualElement{
    33.             style = {
    34.                 flexGrow = 1,
    35.                 backgroundColor = Color.green
    36.             }
    37.         });
    38.     }
    39. }
    40.  
    upload_2022-4-1_14-0-54.png
     
  3. MadWatch

    MadWatch

    Joined:
    May 26, 2016
    Posts:
    112
    Thank you AlexandreT.
    This is what your example looks like on Unity 2020.3.32.
    Sample.png

    Switching to 2022.1 fixes the issue.
     
    AlexandreT-unity likes this.
  4. AlexandreT-unity

    AlexandreT-unity

    Unity Technologies

    Joined:
    Feb 1, 2018
    Posts:
    358
    Interesting, thanks for letting us know, I'll report the problem.